[Scummvm-git-logs] scummvm-web master -> a6dff65a6ea2ee9562cdd7e80615062abd9a37d9

Mataniko mataniko at gmail.com
Mon Aug 27 06:26:16 CEST 2018


This automated email contains information about 5 new commits which have been
pushed to the 'scummvm-web' repo located at https://github.com/scummvm/scummvm-web .

Summary:
8d1cfa9145 WEB: Refresh header markup
b224009bd1 WEB: Update the main page header to make it easier to reuse in the other sites
0ce6ab24c0 WEB: Fix date_localized on windows
819ff7ae99 TEMPLATES: Make use of semantic HTML5 elements
a6dff65a6e WEB: Fix menu bullets in IE


Commit: 8d1cfa9145550672c4d9ad2648713167b19aa01f
    https://github.com/scummvm/scummvm-web/commit/8d1cfa9145550672c4d9ad2648713167b19aa01f
Author: Matan Bareket (mataniko at gmail.com)
Date: 2018-08-24T11:08:36-04:00

Commit Message:
WEB: Refresh header markup

Changed paths:
  A README
    scss/base/_base.scss
    scss/layout/_header.scss
    templates/pages/index.tpl


diff --git a/README b/README
new file mode 100644
index 0000000..e69de29
diff --git a/scss/base/_base.scss b/scss/base/_base.scss
index ae19b07..9dbc015 100644
--- a/scss/base/_base.scss
+++ b/scss/base/_base.scss
@@ -38,15 +38,6 @@ a:hover {
 	font-weight: bold;
 }
 
-header .row .top {
-	height: 91px;
-	position: relative;
-}
-
-.top img {
-	max-width: 58%;
-}
-
 .banners a,
 .banners form {
 	margin: 8px;
@@ -59,6 +50,11 @@ header .row .top {
 	height: 37px;
 }
 
+#intro_header {
+  font-size: 0.9em;
+  line-height: 1.2213em;
+}
+
 /* Content boxes */
 
 .container {
diff --git a/scss/layout/_header.scss b/scss/layout/_header.scss
index dd7a8ef..28551a3 100644
--- a/scss/layout/_header.scss
+++ b/scss/layout/_header.scss
@@ -1,45 +1,55 @@
 /* Header */
 
-.scummvm {
-  font-family: Trebuchet MS, sans-serif;
-  line-height: 19px;
-  font-size: 15px;
-  white-space: nowrap;
-  margin-right: 5px;
-  margin-top: 5px;
-  text-align: justify;
-  letter-spacing: 1.5px;
-}
+header {
+	.row {
+		&.top  {
+			height: 91px;
+			position: relative;
 
-.header-image {
-  bottom: -2px;
-  position: absolute;
-  right: 0;
-}
+			img {
+				bottom: -2px;
+				position: absolute;		
+				right: 0;		
+				float: right;
+				max-width: 58%;
+				vertical-align: bottom;
+			}
+		}
 
-.logo {
-  max-width: 280px;
-  height: auto;
-  position: absolute;
-  bottom: 0;
-  filter: drop-shadow(1px 1px 2px $black);
-}
+		&.bottom {
+			height: 29px;			
+			background: $theme-wrapper-topper ;
+			border-radius: 8px 8px 0 0;
+			position: relative; 
 
-.maniac {
-  opacity: 0.2;
-  bottom: 30px;
-  left: 12px;
-  filter: grayscale(100%);
-}
+			.logo {
+				position: absolute;
+				bottom: -30px;
+				img {
+					position: absolute;
+					max-width: 280px;		
+					filter: drop-shadow(1px 1px 2px $black);
+					bottom: 30px;
 
-.topper {
-  height: 29px;
-  background: $theme-wrapper-topper ;
-  border-radius: 8px 8px 0 0;
-  position: relative; 
-}
+					&.maniac {
+						opacity: 0.2;					
+						left: 12px;
+						bottom: 60px;
+						filter: grayscale(100%);
+					}
+				}							
+			}
 
-#intro_header {
-  font-size: 0.9em;
-  line-height: 1.2213em;
+			.scummvm {
+				font-family: Trebuchet MS, sans-serif;
+				line-height: 19px;
+				font-size: 15px;
+				white-space: nowrap;
+				margin-right: 5px;
+				margin-top: 5px;				
+				text-align: justify;
+				letter-spacing: 1.5px;				
+			}
+		}
+	}
 }
diff --git a/templates/pages/index.tpl b/templates/pages/index.tpl
index 7e6ebeb..6ce015e 100644
--- a/templates/pages/index.tpl
+++ b/templates/pages/index.tpl
@@ -21,15 +21,19 @@
 	<div class="site-wrap">
 		{* Header. *}
 		<header>
-			<div class="row hide-small">
-				<div class="col-1-1 top">
-					<img class="header-image" src="/images/heroes{$heroes_num|rand:0}.png" alt="{#indexCharacters#}">
+			<div class="row top hide-small">				
+				<div class="col-1-1">
+					<img src="/images/heroes{$heroes_num|rand:0}.png" alt="{#indexCharacters#}">
 				</div>
 			</div>
-			<div class="row topper">
+			<div class="row bottom">
 				<div class="col-1-2">
-					<img class="logo maniac hide-small" src="/images/maniac-half.png" alt="Maniac Mansion kids">
-					<a href="{$baseurl}"><img class="logo" src="/images/scummvm_logo.png" alt="{#indexLogo#}"></a>
+					<div class="logo">
+						<img class="maniac hide-small" src="/images/maniac-half.png" alt="Maniac Mansion kids">
+						<a href="{$baseurl}">
+							<img class="logo" src="/images/scummvm_logo.png" alt="{#indexLogo#}">
+						</a>
+					</div>
 				</div>
 				<div class="col-1-2 hide-small float_right">
 					<span class="scummvm float_right">Script Creation Utility for Maniac Mansion Virtual Machine</span>


Commit: b224009bd1125f806ba44cc48ebe5d5d09a0019e
    https://github.com/scummvm/scummvm-web/commit/b224009bd1125f806ba44cc48ebe5d5d09a0019e
Author: Matan Bareket (mataniko at gmail.com)
Date: 2018-08-27T00:08:45-04:00

Commit Message:
WEB: Update the main page header to make it easier to reuse in the other sites

Changed paths:
    scss/abstracts/_mixins.scss
    scss/layout/_header.scss
    scss/layout/_shame.scss
    templates/pages/index.tpl


diff --git a/scss/abstracts/_mixins.scss b/scss/abstracts/_mixins.scss
index ebfe6d1..509aa42 100644
--- a/scss/abstracts/_mixins.scss
+++ b/scss/abstracts/_mixins.scss
@@ -20,3 +20,44 @@
          + 'Please make sure it is defined in `$breakpoints` map.';
   }
 }
+
+
+///
+/// Viewport sized typography with minimum and maximum values
+///
+/// @author Eduardo Boucas (@eduardoboucas)
+///
+/// @param {Number}   $responsive  - Viewport-based size
+/// @param {Number}   $min         - Minimum font size (px)
+/// @param {Number}   $max         - Maximum font size (px)
+///                                  (optional)
+/// @param {Number}   $fallback    - Fallback for viewport-
+///                                  based units (optional)
+///
+/// @example scss - 5vw font size (with 50px fallback), 
+///                 minumum of 35px and maximum of 150px
+///  @include responsive-font(5vw, 35px, 150px, 50px);
+///
+ at mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
+  $responsive-unitless: $responsive / ($responsive - $responsive + 1);
+  $dimension: if(unit($responsive) == 'vh', 'height', 'width');
+  $min-breakpoint: $min / $responsive-unitless * 100;
+  
+  @media (max-#{$dimension}: #{$min-breakpoint}) {
+    font-size: $min;
+  }
+  
+  @if $max {
+    $max-breakpoint: $max / $responsive-unitless * 100;
+    
+    @media (min-#{$dimension}: #{$max-breakpoint}) {
+      font-size: $max;
+    }
+  }
+  
+  @if $fallback {
+    font-size: $fallback;
+  }
+  
+  font-size: $responsive;
+}
diff --git a/scss/layout/_header.scss b/scss/layout/_header.scss
index 28551a3..50e281b 100644
--- a/scss/layout/_header.scss
+++ b/scss/layout/_header.scss
@@ -1,54 +1,68 @@
 /* Header */
 
-header {
-	.row {
-		&.top  {
-			height: 91px;
-			position: relative;
-
-			img {
-				bottom: -2px;
-				position: absolute;		
-				right: 0;		
-				float: right;
-				max-width: 58%;
-				vertical-align: bottom;
-			}
+.site-header {
+	position: relative;
+	z-index: 10;
+
+	.top {
+		height: 91px;
+		position: relative;
+
+		@include respond-to('small') {
+			height: 58px;
 		}
+	}
+
+	.bottom {
+		height: 29px;
+		background: $theme-wrapper-topper;
+		border-radius: 8px 8px 0 0;
+		z-index: 100;
+	}
+
+	.heroes {
+		position: absolute;
+		right: -8px;
+		bottom: 0;
+		z-index: 90;
+		max-width: 58%;
+	}
+
+	.scummvm {
+		font-family: Trebuchet MS, sans-serif;
+		line-height: 19px;
+		@include responsive-font(1.4vw, 10px, 15px, 15px);
+		white-space: nowrap;
+		margin-right: 5px;
+		margin-top: 5px;
+		text-align: justify;
+		letter-spacing: 1.5px;
+	}
+	
+	.logo {
+		position: relative;		
+		z-index: 110;
+
+		img {
+			position: absolute;
+			max-width: 280px;							
+
+			&.foreground {				
+				filter: drop-shadow(1px 1px 2px $black);
+				bottom: -120px;
 
-		&.bottom {
-			height: 29px;			
-			background: $theme-wrapper-topper ;
-			border-radius: 8px 8px 0 0;
-			position: relative; 
-
-			.logo {
-				position: absolute;
-				bottom: -30px;
-				img {
-					position: absolute;
-					max-width: 280px;		
-					filter: drop-shadow(1px 1px 2px $black);
-					bottom: 30px;
-
-					&.maniac {
-						opacity: 0.2;					
-						left: 12px;
-						bottom: 60px;
-						filter: grayscale(100%);
-					}
-				}							
+				@include respond-to('small') {
+					max-width: 150px;
+					bottom: -52px;
+					margin-left: 8px;
+				}	
 			}
 
-			.scummvm {
-				font-family: Trebuchet MS, sans-serif;
-				line-height: 19px;
-				font-size: 15px;
-				white-space: nowrap;
-				margin-right: 5px;
-				margin-top: 5px;				
-				text-align: justify;
-				letter-spacing: 1.5px;				
+			&.background {
+				opacity: 0.2;
+				bottom: -90px;		
+				left: 12px;
+				filter: grayscale(100%);
 			}
 		}
 	}
diff --git a/scss/layout/_shame.scss b/scss/layout/_shame.scss
index d63bf37..ae6f07e 100644
--- a/scss/layout/_shame.scss
+++ b/scss/layout/_shame.scss
@@ -19,9 +19,6 @@
 	.col-1-2 {
 		width: 100%;
 	}
-	.scummvm {
-		font-size: 1.4vw;
-	}
 	.col-md-2 {
 		width: 50%;
 	}
@@ -49,13 +46,6 @@
 	[class*='col-'] {
 		padding-right: 0;
 	}
-	.logo {
-		max-width: 150px;
-		width: 100%;
-		position: relative;
-		top: 8px;
-		margin-left: 8px;
-	}
 	.topper {
 		border-radius: 0;
 		background: 0;
@@ -63,12 +53,6 @@
 	.container {
 		border-radius: 0;
 	}
-	header {
-		width: 100%;
-		height: 58px;
-		z-index: 999;
-		border-bottom: 1px rgb(169, 169, 169) solid;
-	}
 	.col-1-5 {
 		width: 100%;
 	}
diff --git a/templates/pages/index.tpl b/templates/pages/index.tpl
index 6ce015e..29fc8f3 100644
--- a/templates/pages/index.tpl
+++ b/templates/pages/index.tpl
@@ -20,22 +20,20 @@
 
 	<div class="site-wrap">
 		{* Header. *}
-		<header>
-			<div class="row top hide-small">				
+		<header class="site-header">
+			<div class="logo">
+					<img class="background hide-small" src="/images/maniac-half.png" alt="Maniac Mansion kids">
+					<a href="{$baseurl}">
+						<img class="foreground" src="/images/scummvm_logo.png" alt="{#indexLogo#}">
+					</a>
+			</div>			
+			<div class="row top">
 				<div class="col-1-1">
-					<img src="/images/heroes{$heroes_num|rand:0}.png" alt="{#indexCharacters#}">
+					<img class="heroes hide-small" src="/images/heroes{$heroes_num|rand:0}.png" alt="{#indexCharacters#}">
 				</div>
 			</div>
-			<div class="row bottom">
-				<div class="col-1-2">
-					<div class="logo">
-						<img class="maniac hide-small" src="/images/maniac-half.png" alt="Maniac Mansion kids">
-						<a href="{$baseurl}">
-							<img class="logo" src="/images/scummvm_logo.png" alt="{#indexLogo#}">
-						</a>
-					</div>
-				</div>
-				<div class="col-1-2 hide-small float_right">
+			<div class="row bottom hide-small">			
+				<div class="col-1-1">
 					<span class="scummvm float_right">Script Creation Utility for Maniac Mansion Virtual Machine</span>
 				</div>
 			</div>


Commit: 0ce6ab24c08eb57a5f95e2d66db763582a063532
    https://github.com/scummvm/scummvm-web/commit/0ce6ab24c08eb57a5f95e2d66db763582a063532
Author: Matan Bareket (mataniko at gmail.com)
Date: 2018-08-27T00:08:59-04:00

Commit Message:
WEB: Fix date_localized on windows

Changed paths:
    include/Controller.php


diff --git a/include/Controller.php b/include/Controller.php
index 48e8cd7..85f73d7 100644
--- a/include/Controller.php
+++ b/include/Controller.php
@@ -120,6 +120,9 @@ class Controller {
 
 	/** Formating of dateAs, registered as a modifier for Smarty templates. */
 	public function date_localized($timestamp, $format) {
+		if (strtoupper(substr(PHP_OS, 0, 3)) == 'WIN') {
+			$format = preg_replace('#(?<!%)((?:%%)*)%e#', '\1%#d', $format);
+		}
 		return strftime($format, $timestamp);
 	}
 


Commit: 819ff7ae9994de07b9c62e0de991811fcd6b7abe
    https://github.com/scummvm/scummvm-web/commit/819ff7ae9994de07b9c62e0de991811fcd6b7abe
Author: Matan Bareket (mataniko at gmail.com)
Date: 2018-08-27T00:08:59-04:00

Commit Message:
TEMPLATES: Make use of semantic HTML5 elements

Changed paths:
    templates/components/box.tpl
    templates/components/roundbox.tpl
    templates/pages/news.tpl


diff --git a/templates/components/box.tpl b/templates/components/box.tpl
index f628aae..e989c8f 100644
--- a/templates/components/box.tpl
+++ b/templates/components/box.tpl
@@ -1,15 +1,15 @@
-<div class="box" {if $id}id="{$id}"{/if}>
+<{if $article}article{else}section{/if} class="box" {if $id}id="{$id}"{/if}>
 	{if $head}
-	<div class="head">
+	<header class="head">
 		{$head}
-	</div>
+	</header>
 	{/if}
 	{if $intro}
-	<div class="intro">		
+	<section class="intro">		
 		{$intro}
-	</div>
+	</section>
 	{/if}
-	<div class="content">
+	<section class="content">
 		{$content}
-	</div>
-</div>
+	</section>
+</{if $article}article{else}section{/if}>
diff --git a/templates/components/roundbox.tpl b/templates/components/roundbox.tpl
index 68122a8..e31cfce 100644
--- a/templates/components/roundbox.tpl
+++ b/templates/components/roundbox.tpl
@@ -1,10 +1,10 @@
-<div class="round-box">
+<section class="round-box">
   {if $header}
-  <div class="header">
+  <header class="header">
     {$header}
-  </div>
+  </header>
   {/if}
-  <div class="content{if $class} {$class}{/if}">
+  <section class="content{if $class} {$class}{/if}">
     {$content}
-  </div>  
-</div>
+  </section>  
+</section>
diff --git a/templates/pages/news.tpl b/templates/pages/news.tpl
index db9b4b2..370b4fa 100644
--- a/templates/pages/news.tpl
+++ b/templates/pages/news.tpl
@@ -13,7 +13,7 @@
     </div>
     {$news->getContent()}
 	{/capture}
-	{include "components/box.tpl" id=$id head=$smarty.capture.head content=$smarty.capture.content} 
+	{include "components/box.tpl" id=$id head=$smarty.capture.head content=$smarty.capture.content article="true"} 
 {/foreach}
 
 {* Only show the 'more news' link if we're on the main page *}


Commit: a6dff65a6ea2ee9562cdd7e80615062abd9a37d9
    https://github.com/scummvm/scummvm-web/commit/a6dff65a6ea2ee9562cdd7e80615062abd9a37d9
Author: Matan Bareket (mataniko at gmail.com)
Date: 2018-08-27T00:16:08-04:00

Commit Message:
WEB: Fix menu bullets in IE

Changed paths:
    scss/layout/_menu.scss
    templates/components/lang_menu.tpl
    templates/components/menu_group.tpl


diff --git a/scss/layout/_menu.scss b/scss/layout/_menu.scss
index 80e5ff5..73942c5 100644
--- a/scss/layout/_menu.scss
+++ b/scss/layout/_menu.scss
@@ -25,15 +25,17 @@ nav {
       margin-bottom: 0;
     }
   }
-  a {
+  .bullet {
     background: url('/images/bullet2.svg');
     background-size: contain;
     background-position: 1px 2px;
     background-repeat: no-repeat;
-    padding-left: 28px;
-    color: $theme-menu-link;
+    padding-left: 28px; 
+	}
+	a {
+		color: $theme-menu-link;
     text-decoration: none;
-  }
+	}
   dd.no-bullet a {
     background: 0;
     padding-left: 0;
diff --git a/templates/components/lang_menu.tpl b/templates/components/lang_menu.tpl
index 429b92f..8c77a2b 100644
--- a/templates/components/lang_menu.tpl
+++ b/templates/components/lang_menu.tpl
@@ -5,7 +5,7 @@
     </dt>
     {foreach from=$available_languages key=key item=item}
     <dd>
-        <a href="{$pageurl}?lang={$key}">{$item|escape}</a>
+        <span class="bullet"></span><a href="{$pageurl}?lang={$key}">{$item|escape}</a>
     </dd>
     {/foreach}
 </dl>
diff --git a/templates/components/menu_group.tpl b/templates/components/menu_group.tpl
index 31bce7c..ef29c12 100644
--- a/templates/components/menu_group.tpl
+++ b/templates/components/menu_group.tpl
@@ -4,6 +4,6 @@
 		<label for="{$menu->getClass()}">{$menu->getName()}</label>
 	</dt>
 	{foreach from=$menu->getEntries() key=text item=url}
-		<dd><a href="{eval var=$url}">{$text}</a></dd>
+		<dd><span class="bullet"></span><a href="{eval var=$url}">{$text}</a></dd>
 	{/foreach}
 </dl>





More information about the Scummvm-git-logs mailing list