From a8c2913c26f4c0b1e18d749fefea07af45429d87 Mon Sep 17 00:00:00 2001
From: Isarra <zhorishna@gmail.com>
Date: Sat, 31 Oct 2015 17:23:19 +0000
Subject: [PATCH] Style search some more, add an icon

Change-Id: Id2ce1f3761f3948b647e638b5f130d5b5f9cc60a
---
 TimelessTemplate.php            |  39 ++++++++------
 resources/images/search-ltr.png | Bin 0 -> 647 bytes
 resources/images/search-ltr.svg |  93 ++++++++++++++++++++++++++++++++
 resources/screen-desktop.less   |  35 +++++++-----
 4 files changed, 138 insertions(+), 29 deletions(-)
 create mode 100644 resources/images/search-ltr.png
 create mode 100644 resources/images/search-ltr.svg

diff --git a/TimelessTemplate.php b/TimelessTemplate.php
index cabe983..5ecae6c 100644
--- a/TimelessTemplate.php
+++ b/TimelessTemplate.php
@@ -197,26 +197,33 @@ class TimelessTemplate extends BaseTemplate {
 	}
 
 	/**
-	 * Outputs the logo and site title
+	 * Outputs the search
 	 */
 	private function outputSearch() {
 		?>
-		<form
-			action="<?php $this->text( 'wgScript' ) ?>"
-			role="search"
-			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>
+		<div class="mw-portlet" id="p-search">
+			<h3<?php $this->html( 'userlangattributes' ) ?>>
+				<label for="searchInput"><?php $this->msg( 'search' ) ?></label>
 			</h3>
-			<?php echo $this->makeSearchButton( 'go', array( 'id' => 'searchGoButton', 'class' => 'searchButton' ) ) ?>
-			<div id="searchInput-container">
-				<?php echo $this->makeSearchInput( array( "id" => "searchInput" ) ) ?>
-			</div>
-			<input type='hidden' name="title" value="<?php $this->text( 'searchtitle' ) ?>"/>
-		</form>
+			<form action="<?php $this->text( 'wgScript' ) ?>" id="searchform">
+				<div id="simpleSearch">
+				<div id="searchInput-container">
+					<?php echo $this->makeSearchInput( array( 'id' => 'searchInput' ) ); ?>
+				</div>
+				<?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
 	}
 
diff --git a/resources/images/search-ltr.png b/resources/images/search-ltr.png
new file mode 100644
index 0000000000000000000000000000000000000000..1ab7f2d3417af034a3c1dae2558ae8ea73229455
GIT binary patch
literal 647
zcmV;20(kw2P)<h;3K|Lk000e1NJLTq000yK000yS1^@s6jfou%00004b3#c}2nYxW
zd<bNS00009a7bBm000fw000fw0YWI7cmMzZ8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H10t87!K~y-6t(4D78&MR-f9Kw*P7nfCbf?hx0+m{@B`cqyr48-M
z;u|z1+ERxu#wk96#hv)4xau+p?iwn%?kX<oN;K&v<hq!-T{IIfV;rRIw>#hY_;Jo~
z&%l3{WQ`yQRH0C)BuVm8MCO4B;1W2t*6v(gUF`)yklYElzP?@(kptji&JZVB>u1$!
z^)wgQhc$u8{G|Xm*IF+OgDQai{e9h^EQR$%<b$<#c6@w%#9BKGtO31#e=3gSFF_Ef
zEYJgJwOTK@Ub816i?v#<>Ev3#$1n^VN~uGj06ZEU9eob$-I&l?TXDQF0~=^{b@iKw
zd`fE(sbn*%-<VGgt@ZXWSgIsR-2UUCK;V9A6pO{PJmA>a*iWaNxDD7&jdr^|od-0=
z%sA!cZNTG!q13B9U>wJ8|NCvg-PEwwu7qLuWEd=pqNgIV;$(NT84ti1v+Mi*TVM_-
zD5VagD2kL)+rICgb-UeZ;5D!Ui~xwpg)!zJ3mja^#>U2jIF6gZRNl%NZ5d;h-P<0#
z^lG(ws<mDKPVxvMa^aLqzVC0k7o**9qtW<PE|))hp7#T|2Ne0U;yG{#td&ZoH=Ryr
zlIu4(=Xu^txm^BwbaZ5I{J!p@APAK2`<uX$V~6#6{oRe@z9TR(#w-I{j=c!ZH~a@^
h2sB0H{ok^3^&74{tDR<0PU!#u002ovPDHLkV1nD`C8q!Y

literal 0
HcmV?d00001

diff --git a/resources/images/search-ltr.svg b/resources/images/search-ltr.svg
new file mode 100644
index 0000000..1a4e6bb
--- /dev/null
+++ b/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>
diff --git a/resources/screen-desktop.less b/resources/screen-desktop.less
index 9dc2492..7e64b0c 100644
--- a/resources/screen-desktop.less
+++ b/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;
-}
-#searchInput-container {
-	margin: .5em 8em 0 0;
+	margin: .5em 0 0 0;
+	position: relative;
+	border-top: solid 1px @foreground2;
 }
 #searchInput {
 	border: none;
 	margin: 0;
-	width: 100%;
-	height: 2.25em;
-	padding-left: 1em;
+	height: 2.1em;
+	padding: .65em 4.5em .45em 2em;
 	box-shadow: none;
 	background: transparent;
+	width: 100%;
 }
-#searchGoButton {
-	float: right;
-	width: 7.5em;
-	height: 2.25em;
+#searchButton,
+#mw-searchButton {
+	position: absolute;
+	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;
 }