Bladeren bron

Several UI changes across all pages, especially the home page.

seavenois 10 jaren geleden
bovenliggende
commit
31449a8ec9

+ 1 - 1
www/actividades/actividad.php

@@ -102,7 +102,7 @@
 			?>
 			<div id="middle_column">
 				<div class="section">
-					<h3 id="activity_title"><?php echo($r['title']); ?></h3>
+					<h3 class='section_title' id="activity_title"><?php echo($r['title']); ?></h3>
 					<span id="activity_date"><?php echo(formatDate($r['date'], $lang, false)); ?></span>
 					<div class="entry" itemscope itemtype='http://schema.org/Event'>
 						<?php

+ 2 - 2
www/actividades/index.php

@@ -64,7 +64,7 @@
 		<?php
 			//Upcoming activities
 			echo "<div class='section'>\n";
-			echo "<h3>$lng[activities_upcoming]</h3>\n";
+			echo "<h3 class='section_title'>$lng[activities_upcoming]</h3>\n";
 			$q_upcoming = mysqli_query($con, "SELECT id, permalink, date, DATE_FORMAT(date, '%Y-%m-%d') AS isodate, title_$lang AS title, text_$lang AS text, price, inscription, people, max_people, user, dtime, comments, city FROM activity WHERE visible = 1 AND date > now() ORDER BY date;");
 			if (mysqli_num_rows($q_upcoming) > 0){
 				while ($r_activity = mysqli_fetch_array($q_upcoming)){
@@ -139,7 +139,7 @@
 			$q_past = mysqli_query($con, "SELECT id, permalink, date, title_$lang AS title, after_$lang AS text, text_$lang AS alt_text, price, inscription, people, max_people, user, dtime, comments FROM activity WHERE id != $next_activity_id AND visible = 1 AND date < now() ORDER BY date DESC;");
 			if (mysqli_num_rows($q_past) > 0){
 				echo "<br/><br/><div class='section'>\n";
-				echo "<h3>$lng[activities_past]</h3>\n";
+				echo "<h3 class='section_title'>$lng[activities_past]</h3>\n";
 				$i = 0;
 				while ($r_past = mysqli_fetch_array($q_past)){
 					echo "<div class='entry past_activity'>\n";

+ 3 - 3
www/ayuda/index.php

@@ -63,7 +63,7 @@
 			<div class="content_row">
 				<div class="content_cell">
 					<div class="section" id="section_association">
-						<h3><?php echo $lng['help_contact_title']; ?></h3>
+						<h3 class='section_title'><?php echo $lng['help_contact_title']; ?></h3>
 						<div class="entry">
 							<table id="association">
 								<tr>
@@ -112,7 +112,7 @@
 				</div>
 				<div class="content_cell">
 					<div class="section" id="section_license">
-						<h3><?php echo $lng['help_license_title']; ?></h3>
+						<h3 class='section_title'><?php echo $lng['help_license_title']; ?></h3>
 						<div class="entry">
 							<?php echo $lng['help_license']; ?>
 						</div>
@@ -130,7 +130,7 @@
 				</div>
 				<div class="content_cell">
 					<div class="section" id="section_cookie">
-						<h3><?php echo $lng['help_cookie_title']; ?></h3>
+						<h3 class='section_title'><?php echo $lng['help_cookie_title']; ?></h3>
 						<div class="entry">
 							<?php echo $lng['help_cookie']; ?>
 						</div>

+ 2 - 2
www/blog/common/rightpanel.php

@@ -6,13 +6,13 @@
 				$q_year = mysqli_query($con, "SELECT year(dtime) AS year FROM post WHERE visible = 1 GROUP BY year(dtime) ORDER BY year DESC;");
 				while($r_year = mysqli_fetch_array($q_year)){
 					echo "<div class='year pointer' onClick=\"toggleElement('year_$r_year[year]');\">";
-					echo "<img class='slid' id='slid_year_$r_year[year]' src='http://$http_host/img/misc/slid-right.png' alt=' '/>" . $r_year['year'];
+					echo ("<img class='slid' id='slid_year_$r_year[year]' src='http://$http_host/img/misc/slid-right.png' alt=' '/><span class='fake_a'>$r_year[year]</span>");
 					echo "</div>\n";
 					echo "<div class='list_year pointer' id='list_year_$r_year[year]'>\n";
 					$q_month = mysqli_query($con, "SELECT month(dtime) AS month FROM post WHERE visible = 1 AND year(dtime) = $r_year[year] GROUP BY month(dtime) ORDER BY month DESC;");
 					while($r_month = mysqli_fetch_array($q_month)){
 						echo "<div class='month pointer' onClick=\"toggleElement('month_$r_year[year]_$r_month[month]');\">";
-						echo "<img class='slid' id='slid_month_$r_year[year]_$r_month[month]' src='http://$http_host/img/misc/slid-right.png' alt=' '/>" . $lng['months'][$r_month['month'] - 1];
+						echo ("<img class='slid' id='slid_month_$r_year[year]_$r_month[month]' src='http://$http_host/img/misc/slid-right.png' alt=' '/><span class='fake_a'>" . $lng['months'][$r_month['month'] - 1] . "</span>");
 						echo "</div>\n";
 						echo "<ul id='list_month_$r_year[year]_$r_month[month]' class='post_list'>\n";
 						$q_title = mysqli_query($con, "SELECT id, permalink, title_$lang AS title FROM post WHERE visible = 1 AND year(dtime) = $r_year[year] AND month(dtime) = '$r_month[month]' ORDER BY dtime DESC;");

+ 1 - 0
www/blog/index.php

@@ -64,6 +64,7 @@
 			<?php include("common/leftpanel.php"); ?>
 			<div id="middle_column" class="section">
 				<?php
+					echo("<h3 class='section_title'>$lng[section_blog]</h3>\n");
 					$offset = (int) $_GET['o'];
 					$q = mysqli_query($con, "SELECT id, permalink, title_$lang AS title, text_$lang AS text, DATE_FORMAT(dtime, '%Y-%m-%dT%T') AS isodate, dtime, comments FROM post WHERE visible = 1 ORDER BY dtime DESC LIMIT 5 OFFSET $offset;");
 					while($r = mysqli_fetch_array($q)){

+ 64 - 32
www/css/ui.css

@@ -52,6 +52,19 @@ a:hover{
 	text-decoration:	underline;
 }
 
+/* Fake links */
+.fake_a{
+	color:				#4c9ed9;
+	text-decoration:	none;
+	transition:			all .2s ease-in-out;
+}
+
+.fake_a:hover{
+	color:				#347;
+	text-shadow:		0 0 0.4em #265885;
+	text-decoration:	underline;
+}
+
 /* Body */
 body{
 	font-family:		font;
@@ -135,11 +148,9 @@ div#header{
 	margin:				-0.5em auto 2.5em auto;
 	padding:			0.5em	0 0 0;
 	width:				100%;
-/* 	background-color:	#9bc1da; */
 	background-color:	#0078ff;
-/* 	border-radius:		0 0 0.3em 0.3em; */
-	border-bottom:		0.2em solid #9cd3d9;
-	box-shadow:			0 0 2em #dde;
+	border-bottom:		0.1em solid #1a4d6a;
+	box-shadow:			0 0 3em #dde;
 	text-align:			center;
 }
 
@@ -162,6 +173,8 @@ div#header img{
 	-webkit-filter:	drop-shadow(0 0 0.4em #dde);
 /*     filter:			url(#drop-shadow); */
 	filter:			drop-shadow(0 0 0.4em #dde);
+	border:			0.1em solid #000011;
+	border-radius:	100%;
     -ms-filter:		"progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#dde')";
     filter:			"progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#dde')";
 }
@@ -171,11 +184,12 @@ div#header_menu{
 	display:			inline-block;
 	vertical-align:		middle;
 	width:				90%;
-	margin-top:			-1em;
+	margin-top:			-0.2em;
 	margin-left:		-4%;
-	background-color:	#eeeeff;
-/* 	border-radius:		0. 5em; */
-	border:				0.2em solid #9bc1da;
+	background-color:	#f5fbff;
+	border-top-right-radius:		0.5em;
+	border-bottom-right-radius:		0.5em;
+	border:				0.1em solid #1a4d6a;
 }
 
 /* Table with the links to the sections */
@@ -203,9 +217,10 @@ div#header_menu table td{
 }
 
 div#header_menu table td:hover{
-	background-color:	#4c9ed8;
+	background-color:	#0078ff;
 }
 
+
 div#header_menu table td:hover a{
 	color:			#ffffff;
 	text-shadow:	0 0 0em #ffffff;
@@ -219,6 +234,7 @@ div#header_menu table a{
 	width:			100%;
 	padding-top:	0.8em;
 	padding-bottom:	0.8em;
+	color:			#0078ff
 }
 
 
@@ -229,18 +245,20 @@ div#header_menu table a{
 
 /* Footer top container */
 div#footer{
-	width:		100%;
-	display:	inline-block;
-	
+	width:				100%;
+	display:			inline-block;
+	background-color:	#0078ff;
+	border-top:			0.1em solid #1a4d6a;
 	margin-top:			1em;
 /* 	margin:				-0.5em auto 2.5em auto; */
 	padding:			0.5em 0 0.5em 0;
 	width:				100%;
-	background-color:	#9bc1da;
+/* 	background-color:	#9bc1da; */
 /* 	border-radius:		0 0 0.3em 0.3em; */
-	border-top:		0.2em solid #9cd3d9;
+/* 	border-top:		0.2em solid #9cd3d9; */
 	box-shadow:			0 0 2em #dde;
 	text-align:			center;
+	color:				#ccddff
 }
 
 /* Table containing the footer elemnts */
@@ -262,6 +280,12 @@ div#footer div#footer_table div.td{
 	vertical-align:	top;
 }
 
+div#footer span#footer_info{
+	font-size:	80%;
+	font-style:	italic;
+	color:		#222233;
+}
+
 div#footer div#footer_table div#footer_center{
 
 }
@@ -394,9 +418,20 @@ div#content{
 div.section{
 /* 	background-color:	#9bc1da; */
 /* 	padding:			0.1em 0.3em 0.1em 0.1em; */
-	border:				-0.1em solid #9cd3d9;
-	padding:			0;
-	background: linear-gradient(135deg, transparent 1.2em, #98c8ff 0) top left;
+/* 	border:				-0.1em solid #9cd3d9; */
+/* 	border:				0.1em solid #000011;  */
+	border-left:		0.1em solid #000011;
+	border-right:		0.1em solid #000011;
+	border-bottom:		0.1em solid #000011;
+	border-radius:		1em;
+	padding:			0 0 0.5em 0;
+/* 	background: linear-gradient(135deg, transparent 1.2em, #98c8ff 0) top left; */
+	background-color:	#98c8ff;
+	-webkit-filter:	drop-shadow(0 0 0.4em #000011);
+/*     filter:			url(#drop-shadow); */
+	filter:			drop-shadow(0 0 0.4em #000011);
+    -ms-filter:		"progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#000011')";
+    filter:			"progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#000011')";
 }
 
 /* Title for each section */
@@ -405,34 +440,30 @@ div.section{
 	font-style:	bold;
 /* 	margin-top:	0.5em; */
 	color:		#ffffff;
-/* 	background-color:	#0000ff; */
-	background: linear-gradient(135deg, transparent 0.8em, #0078ff 0) top left;
+	background-color:	#0078ff;
+/* 	background: linear-gradient(135deg, transparent 0.8em, #0078ff 0) top left; */
 	padding:			0.5em 2em 0.1em 1.5em;
-	border-bottom:		0.1em solid #003488;
+	border-top-left-radius:	0.7em;
+	border-top-right-radius:	0.7em;
+	border:		0.1em solid #000011;
+
 	margin:				0;
 }
 
 div.section a.go_to_section{
-	color:			#ddddff;
+/* 	color:			#222266; */
+	margin-right:	2em;
 	font-weight:	bold;
 	text-shadow:	0 0 0.0em #ffffff;
 }
 
 /* Entries */
-div.entry{
-	background-color:	#ffffff;
-	padding:			0.2em;
-	margin:				0.4em;
-	border:				0.2em solid #9cd3d9;
-	box-shadow:			inset 0 0 0.2em #dde;
-	transition:			all .3s ease-in-out;
-}
-
-td.entry{
+.entry{
 	background-color:	#ffffff;
 	padding:			0.2em;
 	margin:				0.4em;
-	border:				0.2em solid #9cd3d9;
+	border:				0.1em solid #6D6990;
+	border-radius:		0.3em;
 	box-shadow:			inset 0 0 0.2em #dde;
 	transition:			all .3s ease-in-out;
 }
@@ -486,6 +517,7 @@ div#comment_new input[type='submit']{
 * Styles for the ad window.               *
 ******************************************/
 div#ad{
+	border:						0.1em solid #000011;
 	width:						25%;
 	max-width:					25em;
 	min-width:					12em;

+ 11 - 11
www/footer.php

@@ -10,7 +10,7 @@
 				<a title="Youtube" target="_blank" href="https://www.youtube.com/user/GasteizkoMargolariak"><img class="footer_social_icon" src="http://<?php echo $_SERVER['HTTP_HOST']; ?>/img/social/youtube.gif" alt="Youtube"/></a>
 				<a title="Instagram" target="_blank" href="https://instagram.com/gmargolariak/"><img class="footer_social_icon" src="http://<?php echo $_SERVER['HTTP_HOST']; ?>/img/social/instagram.gif" alt="nstagram"/></a>
 <!--  				<a title="RSS" href="http://<?php echo $_SERVER['HTTP_HOST']; ?>/rss.xml"><img class="footer_social_icon" src="http://<?php echo $_SERVER['HTTP_HOST']; ?>/img/social/rss.gif" alt="RSS"/></a> -->
-				<br/><span class='desktop'><?php echo($lng['footer_info']); ?></span>
+				<br/><span id="footer_info" class='desktop'><?php echo($lng['footer_info']); ?></span>
 			</div>
 			<div class="td" id="footer_center">
 				<br class="mobile"/><br class="mobile"/>
@@ -19,21 +19,21 @@
 					$ad_static = Array();
 					if (mysqli_num_rows($q) > 0){
 						echo("<span class='desktop'>$lng[footer_sponsors]</span></br class='desktop'>\n");
-						$idx = 0;
+						//$idx = 0;
 						while ($r = mysqli_fetch_array($q)){
 							
 							array_push($ad_static, $r['id']);
 						
-							if ($idx == 0){
-								echo("<a target='_blank' href='$r[link]'><span class='desktop'>$r[name]</span><img src='/img/spo/miniature/$r[image]'/></a>");
-							}
-							elseif ($idx == 1){
-								echo("&nbsp;&nbsp;&nbsp;<a target='_blank' href='$r[link]'><img src='/img/spo/thumb/$r[image]'/><span class='desktop'>$r[name]</span></a></br class='desktop'>");
-							}
-							else{
+							//if ($idx == 0){
+							//	echo("<a target='_blank' href='$r[link]'><span class='desktop'>$r[name]</span><img src='/img/spo/miniature/$r[image]'/></a>");
+							//}
+							//elseif ($idx == 1){
+							//	echo("&nbsp;&nbsp;&nbsp;<a target='_blank' href='$r[link]'><img src='/img/spo/thumb/$r[image]'/><span class='desktop'>$r[name]</span></a></br class='desktop'>");
+							//}
+							//else{
 								echo("<a target='_blank' href='$r[link]'><img src='/img/spo/thumb/$r[image]'/></a>");
-							}
-							$idx ++;
+							//}
+							//$idx ++;
 						}
 						
 					}

+ 1 - 1
www/galeria/album.php

@@ -75,7 +75,7 @@
 			<div class="section" id="album">
 				<?php
 					//Header
-					echo "<h3 id='album_title'>$r[title]</h3>\n";
+					echo "<h3 class='section_title' id='album_title'>$r[title]</h3>\n";
 					if ($r['description'] != ''){
 						echo "<div class='entry' id='album_header'>\n";
 						echo $r['description'];

+ 1 - 1
www/galeria/index.php

@@ -68,7 +68,7 @@
 			<br/>
 			<div class="section" id="album_list">
 				<?php
-					echo "<h3>$lng[gallery_albums]</h3>\n";
+					echo "<h3 class='section_title'>$lng[gallery_albums]</h3>\n";
 					//Album with photos with dates
 					$q = mysqli_query($con, "SELECT album.id AS id, album.permalink AS permalink, album, album.title_$lang AS title, album.description_$lang AS description FROM photo_album, photo, album WHERE album.id = photo_album.album AND photo = photo.id GROUP BY album ORDER BY avg(photo.uploaded) DESC;");
 					while ($r = mysqli_fetch_array($q)){

+ 4 - 2
www/index.php

@@ -90,7 +90,7 @@
 						}
 						else{
 							echo "<span id='festivals_summary_text'><br/>" . cutText($r_festivals['text'], 300, "$lng[index_read_more]", "http://$http_host/lablanca/") . "</span>\n";
-							echo "<br/><br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='http://$http_host/lablanca/'>$lng[index_festivals_link]</a>\n";
+							//echo "<br/><br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='http://$http_host/lablanca/'>$lng[index_festivals_link]</a>\n";
 						}
 						echo "</div></td>\n";
 					}
@@ -235,6 +235,7 @@
 						echo "</div></td>\n"; //close city schedule entry;
 					}
 					echo "</tr></table>\n";
+					echo "<a class='go_to_section' href='http://$http_host/lablanca/'>$lng[index_festivals_link]</a><br/>\n";
 					echo "</div>\n";
 				}
 			
@@ -304,9 +305,10 @@
 					}
 					echo "</table>\n";
 					echo "<a href='http://$http_host/actividades/$r_activity[permalink]'>$lng[index_upcoming_activity_see]</a><br/><br/>\n";
-					echo "<a href='http://$http_host/actividades/'>$lng[index_upcoming_activity_see_all]</a>\n";
+					
 					echo "</div></div></div></div>\n";
 					echo "</div>\n";//Entry
+					echo "<a class='go_to_section' href='http://$http_host/actividades/'>$lng[index_upcoming_activity_see_all]</a><br/>\n";
 					echo "</div>\n";//Section
 				}
 			?>

+ 2 - 2
www/lablanca/fiestas.php

@@ -18,7 +18,7 @@
 	<div class='content_tr'>
 		<div class='content_td' id='content_td_schedule'>
 			<div class='section' id='schedule'>
-				<h3><?php echo $lng['lablanca_schedule']; ?></h3>
+				<h3 class='section_title'><?php echo $lng['lablanca_schedule']; ?></h3>
 					<?php
 						$q_days = mysqli_query($con, "SELECT id, date, DATE_FORMAT(date, '%Y-%m-%d') AS isodate, name_$lang AS name FROM festival_day WHERE year(date) = $year ORDER BY date");
 						while ($r_days = mysqli_fetch_array($q_days)){
@@ -63,7 +63,7 @@
 		</div>
 		<div class='content_td' id='content_td_prices'>
 			<div class='section' id='prices'>
-				<h3><?php echo $lng['lablanca_prices']; ?></h3>
+				<h3 class='section_title'><?php echo $lng['lablanca_prices']; ?></h3>
 				<div class='entry'>
 					<?php
 						$q_days = mysqli_query($con, "SELECT id, date, DATE_FORMAT(date, '%Y-%m-%d') AS isodate, name_$lang AS name, price FROM festival_day WHERE year(date) = $year ORDER BY date");

+ 1 - 1
www/lablanca/index.php

@@ -137,7 +137,7 @@
 				}
 				if (mysqli_num_rows($q_years) >= 0){
 					echo("<br/><br/><div class='section' id='past_festivals'>\n");
-					echo("<h3>$lng[lablanca_past_title]</h3>\n");
+					echo("<h3 class='section_title'>$lng[lablanca_past_title]</h3>\n");
 					echo("<div class='entry'><ul>\n");
 					while ($r_years = mysqli_fetch_array($q_years)){
 						echo("<li><a href='http://$http_host/lablanca/$r_years[year]'>$lng[lablanca_past_link] $r_years[year]</a></li>\n");

+ 4 - 4
www/nosotros/index.php

@@ -63,7 +63,7 @@
 			<div class="content_row">
 				<div class="content_cell">
 					<div class="section" id="section_association">
-						<h3><?php echo $lng['us_association']; ?></h3>
+						<h3 class='section_title'><?php echo $lng['us_association']; ?></h3>
 						<div class="entry">
 							<img src="/img/nosotros/logo.png" alt=" "/>
 							<?php echo $lng['us_association_content']; ?>
@@ -72,7 +72,7 @@
 				</div>
 				<div class="content_cell">
 					<div class="section" id="section_cuadrilla">
-						<h3><?php echo $lng['us_cuadrilla']; ?></h3>
+						<h3 class='section_title'><?php echo $lng['us_cuadrilla']; ?></h3>
 						<div class="entry">
 							<img src="/img/nosotros/margolo.png" alt=" "/>
 							<?php echo $lng['us_cuadrilla_content']; ?>
@@ -83,7 +83,7 @@
 			<div class="content_row">
 				<div class="content_cell">
 					<div class="section" id="section_activities">
-						<h3><?php echo $lng['us_activities']; ?></h3>
+						<h3 class='section_title'><?php echo $lng['us_activities']; ?></h3>
 						<div class="entry">
 							<img src="/img/nosotros/actividades.png" alt=" "/>
 							<?php echo $lng['us_activities_content']; ?>
@@ -92,7 +92,7 @@
 				</div>
 				<div class="content_cell">
 					<div class="section" id="section_transparency">
-						<h3><?php echo $lng['us_transparency']; ?></h3>
+						<h3 class='section_title'><?php echo $lng['us_transparency']; ?></h3>
 						<div class="entry">
 							<img src="/img/nosotros/transparencia.png" alt=" "/>
 							<?php echo $lng['us_transparency_content']; ?>