Continuation du design : amélioration nav-list + ajout nav-head (avec gestion de la connexion) + début formulaires

5 files changed, 158 insertions, 11 deletions

diff --git a/public/theme/base.css b/public/theme/base.css
index 6b41c922a..64a5b83a2 100644
--- a/public/theme/base.css
+++ b/public/theme/base.css
@@ -40,6 +40,28 @@ img {
 	}
 
 /* FORMULAIRES */
+label {
+	display: block;
+	margin: 5px 0;
+}
+input {
+	display: inline-block;
+	min-height: 25px;
+	padding: 5px 5px;
+	background: #fff;
+	border: 1px solid #bbb;
+	border-radius: 3px;
+	color: #aaa;
+	line-height: 25px;
+	vertical-align: middle;
+	box-shadow: 0 2px 2px #eee inset;
+}
+	input:focus {
+		color: #0062BE;
+		border-color: #33BBFF;
+		box-shadow: 0 2px 2px #DDDDFF inset;
+	}
+
 .btn {
 	display: inline-block;
 	min-height: 25px;
@@ -84,46 +106,63 @@ img {
 		}
 
 /* NAVIGATION */
-.nav.nav-list li {
+.nav.nav-list .nav-header,
+.nav.nav-list .item {
 	display: block;
 	height: 35px;
 	line-height: 35px;
 }
-	.nav.nav-list li:hover {
+	.nav.nav-list .item:hover {
 		background: #fafafa;
 	}
-		.nav.nav-list li:hover a {
+		.nav.nav-list .item:hover a {
 			color: #003388;
 		}
-	.nav.nav-list li.active {
+	.nav.nav-list .item.active {
 		background: #0062BE;
 		color: #fff;
 	}
-		.nav.nav-list li.active a {
+		.nav.nav-list .item.active a {
 			color: #fff;
 		}
-	.nav.nav-list li.disable {
+	.nav.nav-list .disable {
 		color: #aaa;
 		background: #fafafa;
 		text-align: center;
 	}
-	.nav.nav-list li > * {
+	.nav.nav-list .item > * {
 		display: block;
 		padding: 0 10px;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
 	}
 		.nav.nav-list a:hover {
 			text-decoration: none;
 		}
 
-	.nav.nav-list li.nav-header {
+	.nav.nav-list .nav-header {
 		padding: 0 10px;
-		color: #666;
+		color: #888;
 		background: #f4f4f4;
 		border-bottom: 1px solid #ddd;
 		font-weight: bold;
 		text-shadow: 0 0 1px #ddd;
 	}
 
+.nav-head {
+	display: block;
+	margin: 0;
+	background: #fff;
+	background: linear-gradient(#fff, #f0f0f0);
+	border-bottom: 1px solid #ddd;
+	text-align: right;
+}
+	.nav-head .item {
+		display: inline-block;
+		padding: 5px 10px;
+	}
+
 /* ALERTS */
 .alert {
 	display: block;
@@ -169,6 +208,18 @@ img {
 	.icon.configure {
 		background: url("icons/configure.svg") center center no-repeat;
 	}
+	.icon.login {
+		background: url("icons/login.svg") center center no-repeat;
+	}
+	.icon.logout {
+		background: url("icons/logout.svg") center center no-repeat;
+	}
+	.icon.add {
+		background: url("icons/add.svg") center center no-repeat;
+	}
+	.icon.link {
+		background: url("icons/link.svg") center center no-repeat;
+	}
 
 /* STRUCTURE */
 .header {
@@ -245,7 +296,7 @@ img {
 		text-overflow: ellipsis;
 	}
 	.categories .feeds {
-		width: 200px;
+		width: 220px;
 		margin: 0 auto;
 		list-style: none;
 	}
@@ -408,7 +459,7 @@ img {
 					display: inline-block;
 					width: 25px;
 					height: 25px;
-					background: url("icons/website.svg") center center no-repeat;
+					background: url("icons/link.svg") center center no-repeat;
 					vertical-align: middle;
 				}
 					.flux_header .item.link a:hover {
diff --git a/public/theme/icons/add.svg b/public/theme/icons/add.svg
new file mode 100644
index 000000000..425c9b4aa
--- /dev/null
+++ b/public/theme/icons/add.svg
@@ -0,0 +1,30 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg xmlns:cc='http://creativecommons.org/ns#' xmlns:svg='http://www.w3.org/2000/svg' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' id='svg7384' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' version='1.1' inkscape:version='0.47 r22583' height='16' sodipodi:docname='list-add-symbolic.svg' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns#' xmlns='http://www.w3.org/2000/svg' width='16'>
+  <metadata id='metadata90'>
+    <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>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview inkscape:object-paths='true' inkscape:cy='17.83946' inkscape:current-layer='layer12' inkscape:window-width='1920' pagecolor='#555753' showborder='false' showguides='true' inkscape:snap-nodes='false' objecttolerance='10' showgrid='true' inkscape:object-nodes='true' inkscape:pageshadow='2' inkscape:guide-bbox='true' inkscape:window-x='0' inkscape:snap-bbox='true' bordercolor='#666666' id='namedview88' inkscape:window-maximized='1' inkscape:snap-global='true' inkscape:window-y='26' gridtolerance='10' inkscape:zoom='1' inkscape:window-height='1021' borderopacity='1' guidetolerance='10' inkscape:snap-bbox-midpoints='false' inkscape:cx='-2.56708' inkscape:bbox-paths='false' inkscape:snap-grids='true' inkscape:pageopacity='1' inkscape:snap-to-guides='true'>
+    <inkscape:grid visible='true' spacingx='1px' type='xygrid' spacingy='1px' id='grid4866' empspacing='2' enabled='true' snapvisiblegridlinesonly='true'/>
+  </sodipodi:namedview>
+  <title id='title9167'>Gnome Symbolic Icon Theme</title>
+  <defs id='defs7386'/>
+  <g transform='translate(-60.0002,-726)' inkscape:groupmode='layer' id='layer9' inkscape:label='status' style='display:inline'/>
+  <g transform='translate(-60.0002,-726)' inkscape:groupmode='layer' id='layer10' inkscape:label='devices'/>
+  <g transform='translate(-60.0002,-726)' inkscape:groupmode='layer' id='layer11' inkscape:label='apps'/>
+  <g transform='translate(-60.0002,-726)' inkscape:groupmode='layer' id='layer12' inkscape:label='actions'>
+    
+    <path d='m 67.0002,729 0,4 -4,0 0,2 4,0 0,4 2,0 0,-4 4,0 0,-2 -4,0 0,-4 -2,0 z' id='rect31992' style='color:#666666;fill:#666666;fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible'/>
+  </g>
+  <g transform='translate(-60.0002,-726)' inkscape:groupmode='layer' id='layer13' inkscape:label='places'/>
+  <g transform='translate(-60.0002,-726)' inkscape:groupmode='layer' id='layer14' inkscape:label='mimetypes'/>
+  <g transform='translate(-60.0002,-726)' inkscape:groupmode='layer' id='layer15' inkscape:label='emblems' style='display:inline'/>
+  <g transform='translate(-60.0002,-726)' inkscape:groupmode='layer' id='g4953' inkscape:label='categories' style='display:inline'/>
+</svg>
diff --git a/public/theme/icons/website.svg b/public/theme/icons/link.svg
index ddc8e0706..ddc8e0706 100644
--- a/public/theme/icons/website.svg
+++ b/public/theme/icons/link.svg
diff --git a/public/theme/icons/login.svg b/public/theme/icons/login.svg
new file mode 100644
index 000000000..0a8af162f
--- /dev/null
+++ b/public/theme/icons/login.svg
@@ -0,0 +1,33 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg xmlns:cc='http://creativecommons.org/ns#' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:svg='http://www.w3.org/2000/svg' id='svg7384' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' sodipodi:docname='changes-prevent-symbolic.svg' version='1.1' inkscape:version='0.48.1 r9760' height='16' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns#' xmlns='http://www.w3.org/2000/svg' width='16'>
+  <metadata id='metadata90'>
+    <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>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview inkscape:cy='9.416826' pagecolor='#555753' borderopacity='1' showborder='false' inkscape:bbox-paths='false' guidetolerance='10' inkscape:object-paths='true' inkscape:window-width='1296' showguides='true' inkscape:object-nodes='true' inkscape:snap-bbox='true' inkscape:pageshadow='2' inkscape:guide-bbox='true' inkscape:snap-nodes='false' bordercolor='#666666' objecttolerance='10' id='namedview88' showgrid='false' inkscape:window-maximized='0' inkscape:window-x='1941' inkscape:snap-global='true' inkscape:window-y='81' gridtolerance='10' inkscape:window-height='1013' inkscape:snap-to-guides='true' inkscape:current-layer='layer9' inkscape:snap-bbox-midpoints='false' inkscape:zoom='1' inkscape:cx='52.563336' inkscape:snap-grids='true' inkscape:pageopacity='1'>
+    <inkscape:grid spacingx='1px' spacingy='1px' id='grid4866' empspacing='2' enabled='true' type='xygrid' snapvisiblegridlinesonly='true' visible='true'/>
+  </sodipodi:namedview>
+  <title id='title9167'>Gnome Symbolic Icon Theme</title>
+  <defs id='defs7386'/>
+  <g inkscape:label='status' transform='translate(-181.0002,-237)' inkscape:groupmode='layer' id='layer9' style='display:inline'>
+    <g inkscape:label='lock' transform='translate(161.0002,-39)' id='g4053' style='fill:#bebebe;fill-opacity:1'>
+      
+    </g>
+    <path inkscape:connector-curvature='0' d='m 184,244 c -0.554,0 -1,0.446 -1,1 l 0,0.53125 0,5.46875 12,0 0,-5.46875 L 195,245 c 0,-0.554 -0.446,-1 -1,-1 l -10,0 z' id='rect4063' sodipodi:nodetypes='csccccscc' style='color:#bebebe;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible'/>
+    <path inkscape:connector-curvature='0' d='m 188,238 c -1.6447,0 -3,1.3553 -3,3 l 0,7 c 0,1.6447 1.3553,3 3,3 l 2,0 c 1.6447,0 3,-1.3553 3,-3 l 0,-7 c 0,-1.6447 -1.3553,-3 -3,-3 l -2,0 z m 0,2 2,0 c 0.5713,0 1,0.4287 1,1 l 0,7 c 0,0.5713 -0.4287,1 -1,1 l -2,0 c -0.5713,0 -1,-0.4287 -1,-1 l 0,-7 c 0,-0.5713 0.4287,-1 1,-1 z' id='rect4291' style='font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#bebebe;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans'/>
+  </g>
+  <g inkscape:label='devices' transform='translate(-181.0002,-237)' inkscape:groupmode='layer' id='layer10'/>
+  <g inkscape:label='apps' transform='translate(-181.0002,-237)' inkscape:groupmode='layer' id='layer11'/>
+  <g inkscape:label='actions' transform='translate(-181.0002,-237)' inkscape:groupmode='layer' id='layer12'/>
+  <g inkscape:label='places' transform='translate(-181.0002,-237)' inkscape:groupmode='layer' id='layer13'/>
+  <g inkscape:label='mimetypes' transform='translate(-181.0002,-237)' inkscape:groupmode='layer' id='layer14'/>
+  <g inkscape:label='emblems' transform='translate(-181.0002,-237)' inkscape:groupmode='layer' id='layer15' style='display:inline'/>
+  <g inkscape:label='categories' transform='translate(-181.0002,-237)' inkscape:groupmode='layer' id='g4953' style='display:inline'/>
+</svg>
diff --git a/public/theme/icons/logout.svg b/public/theme/icons/logout.svg
new file mode 100644
index 000000000..284a67578
--- /dev/null
+++ b/public/theme/icons/logout.svg
@@ -0,0 +1,33 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg xmlns:cc='http://creativecommons.org/ns#' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:svg='http://www.w3.org/2000/svg' id='svg7384' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' sodipodi:docname='changes-allow-symbolic.svg' version='1.1' inkscape:version='0.48.1 r9760' height='16' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns#' xmlns='http://www.w3.org/2000/svg' width='16'>
+  <metadata id='metadata90'>
+    <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>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview inkscape:cy='9.416826' pagecolor='#555753' borderopacity='1' showborder='false' inkscape:bbox-paths='false' guidetolerance='10' inkscape:object-paths='true' inkscape:window-width='1296' showguides='true' inkscape:object-nodes='true' inkscape:snap-bbox='true' inkscape:pageshadow='2' inkscape:guide-bbox='true' inkscape:snap-nodes='false' bordercolor='#666666' objecttolerance='10' id='namedview88' showgrid='false' inkscape:window-maximized='0' inkscape:window-x='1941' inkscape:snap-global='true' inkscape:window-y='81' gridtolerance='10' inkscape:window-height='1013' inkscape:snap-to-guides='true' inkscape:current-layer='layer9' inkscape:snap-bbox-midpoints='false' inkscape:zoom='1' inkscape:cx='32.563336' inkscape:snap-grids='true' inkscape:pageopacity='1'>
+    <inkscape:grid spacingx='1px' spacingy='1px' id='grid4866' empspacing='2' enabled='true' type='xygrid' snapvisiblegridlinesonly='true' visible='true'/>
+  </sodipodi:namedview>
+  <title id='title9167'>Gnome Symbolic Icon Theme</title>
+  <defs id='defs7386'/>
+  <g inkscape:label='status' transform='translate(-201.0002,-237)' inkscape:groupmode='layer' id='layer9' style='display:inline'>
+    <g inkscape:label='lock' transform='translate(181.0002,-39)' id='g4053-3' style='fill:#bebebe;fill-opacity:1'>
+      
+    </g>
+    <path inkscape:connector-curvature='0' d='m 204,246 c -0.554,0 -1,0.446 -1,1 l 0,0.53125 0,5.46875 12,0 0,-5.46875 L 215,247 c 0,-0.554 -0.446,-1 -1,-1 l -10,0 z' id='rect4063-6' sodipodi:nodetypes='csccccscc' style='color:#bebebe;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible'/>
+    <path inkscape:connector-curvature='0' d='m 208.0002,237 c -1.64469,0 -3,1.35529 -3,3 l 0,3 2,0 0,-3 c 0,-0.57129 0.42873,-1 1,-1 l 2,0 c 0.57127,0 1,0.42871 1,1 l 0,7 2,0 0,-7 c 0,-1.64471 -1.35531,-3 -3,-3 l -2,0 z' id='rect4291-4' style='font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#bebebe;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans'/>
+  </g>
+  <g inkscape:label='devices' transform='translate(-201.0002,-237)' inkscape:groupmode='layer' id='layer10'/>
+  <g inkscape:label='apps' transform='translate(-201.0002,-237)' inkscape:groupmode='layer' id='layer11'/>
+  <g inkscape:label='actions' transform='translate(-201.0002,-237)' inkscape:groupmode='layer' id='layer12'/>
+  <g inkscape:label='places' transform='translate(-201.0002,-237)' inkscape:groupmode='layer' id='layer13'/>
+  <g inkscape:label='mimetypes' transform='translate(-201.0002,-237)' inkscape:groupmode='layer' id='layer14'/>
+  <g inkscape:label='emblems' transform='translate(-201.0002,-237)' inkscape:groupmode='layer' id='layer15' style='display:inline'/>
+  <g inkscape:label='categories' transform='translate(-201.0002,-237)' inkscape:groupmode='layer' id='g4953' style='display:inline'/>
+</svg>