Style search some more, add an icon

Change-Id: Id2ce1f3761f3948b647e638b5f130d5b5f9cc60a

TimelessTemplate.php

@@ -197,26 +197,33 @@ class TimelessTemplate extends BaseTemplate {
 	}
 
 	/**
-	 * Outputs the logo and site title
+	 * Outputs the search
 	 */
 	private function outputSearch() {
 		?>
-		<form
+		<div class="mw-portlet" id="p-search">
-			action="<?php $this->text( 'wgScript' ) ?>"
+			<h3<?php $this->html( 'userlangattributes' ) ?>>
-			role="search"
+				<label for="searchInput"><?php $this->msg( 'search' ) ?></label>
-			class="mw-portlet"
-			id="p-search"
-		>
-			<input type="hidden" name="title" value="<?php $this->text( 'searchtitle' ) ?>" />
-			<h3>
-				<label for="searchInput"><?php echo $this->getMsg( 'search' )->escaped() ?></label>
 			</h3>
-			<?php echo $this->makeSearchButton( 'go', array( 'id' => 'searchGoButton', 'class' => 'searchButton' ) ) ?>
+			<form action="<?php $this->text( 'wgScript' ) ?>" id="searchform">
-			<div id="searchInput-container">
+				<div id="simpleSearch">
-				<?php echo $this->makeSearchInput( array( "id" => "searchInput" ) ) ?>
+				<div id="searchInput-container">
-			</div>
+					<?php echo $this->makeSearchInput( array( 'id' => 'searchInput' ) ); ?>
-			<input type='hidden' name="title" value="<?php $this->text( 'searchtitle' ) ?>"/>
+				</div>
-		</form>
+				<?php
+				echo Html::hidden( 'title', $this->get( 'searchtitle' ) );
+				echo $this->makeSearchButton(
+					'fulltext',
+					array( 'id' => 'mw-searchButton', 'class' => 'searchButton mw-fallbackSearchButton' )
+				);
+				echo $this->makeSearchButton(
+					'go',
+					array( 'id' => 'searchButton', 'class' => 'searchButton' )
+				);
+				?>
+				</div>
+			</form>
+		</div>
 		<?php
 	}
 

resources/images/search-ltr.svg

@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="5.6444445mm"
+   height="5.6444445mm"
+   viewBox="0 0 20 20"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="search-ltr.svg"
+   inkscape:export-filename="/media/shintaiden/home/rahah/mediawiki/skins/Timeless/resources/images/search-ltr.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="31.678384"
+     inkscape:cx="2.1751537"
+     inkscape:cy="17.916436"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:snap-midpoints="true"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:object-paths="true"
+     inkscape:snap-object-midpoints="true"
+     inkscape:snap-center="true"
+     inkscape:snap-bbox="true"
+     inkscape:window-width="3840"
+     inkscape:window-height="2124"
+     inkscape:window-x="1920"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     showguides="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4136"
+       originx="-240"
+       originy="-2025" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-121,-16.362221)">
+    <path
+       style="opacity:1;fill:#888888;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 129.49943,17.362699 c -1.91942,0 -3.83826,0.730845 -5.30273,2.195312 -2.92893,2.928936 -2.92893,7.678491 0,10.607422 2.92893,2.928931 7.67653,2.928934 10.60547,0 2.92894,-2.928936 2.92893,-7.67849 0,-10.607422 -1.46447,-1.464465 -3.38332,-2.195312 -5.30274,-2.195312 z m 0.0664,3 a 4.5,4.5 0 0 1 3.11523,1.316406 4.5,4.5 0 0 1 0,6.365234 4.5,4.5 0 0 1 -6.36328,0 4.5,4.5 0 0 1 0,-6.365234 4.5,4.5 0 0 1 3.24805,-1.316406 z"
+       id="path4140"
+       inkscape:connector-curvature="0" />
+    <rect
+       style="opacity:1;fill:#888888;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4171"
+       width="3"
+       height="9.000001"
+       x="72.490379"
+       y="114.15007"
+       ry="1.5"
+       transform="matrix(0.70710856,-0.707105,0.707105,0.70710856,0,0)" />
+  </g>
+</svg>

resources/screen-desktop.less

@@ -1,7 +1,8 @@
 @import "variables.less";
 
 .ts-inner {
-	max-width: 1250px;
+	max-width: 1300px;
+	padding: 0 3em;
 	margin: auto;
 }
 #p-logo-text,
@@ -22,11 +23,12 @@
 
 #mw-header-container {
 	position: fixed;
+	top: 0;
 	width: 100%;
 	background: @foreground;
 	color: @text-inverse;
 	height: 3em;
-	border-bottom: solid @border @foreground2;
+	border-bottom: solid 1px @foreground2;
 	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
 }
 
@@ -50,28 +52,35 @@
 
 /* SEARCH */
 
-#p-search {
+#simpleSearch {
 	box-shadow: inset 0 2px 2px 1px rgba(0, 0, 0, 0.1);
 	background: @background;
-}
+	margin: .5em 0 0 0;
-#searchInput-container {
+	position: relative;
-	margin: .5em 8em 0 0;
+	border-top: solid 1px @foreground2;
 }
 #searchInput {
 	border: none;
 	margin: 0;
-	width: 100%;
+	height: 2.1em;
-	height: 2.25em;
+	padding: .65em 4.5em .45em 2em;
-	padding-left: 1em;
 	box-shadow: none;
 	background: transparent;
+	width: 100%;
 }
-#searchGoButton {
+#searchButton,
-	float: right;
+#mw-searchButton {
-	width: 7.5em;
+	position: absolute;
-	height: 2.25em;
+	top: 0;
+	right: 1.5em;
+	width: 2.5em;
+	height: 2.5em;
 	border: none;
 	background: transparent;
+	text-indent: -99999px;
+	.background-image-svg('images/search-ltr.svg', 'images/search-ltr.png');
+	background-position: 50% 40%;
+	background-repeat: no-repeat;
 }