Fix issue #46 : ajout de la select list pour les catégories en vue mobile

5 files changed, 74 insertions, 2 deletions

diff --git a/app/layout/aside_flux.phtml b/app/layout/aside_flux.phtml
index c7b520b35..198103428 100644
--- a/app/layout/aside_flux.phtml
+++ b/app/layout/aside_flux.phtml
@@ -1,4 +1,6 @@
 <div class="aside aside_flux" id="aside_flux">
+	<a class="toggle_aside" href="#close"><i class="icon i_close"></i></a>
+
 	<ul class="categories">
 		<?php if (!login_is_conf ($this->conf) || is_logged ()) { ?>
 		<li><a class="btn btn-important" href="<?php echo _url ('configure', 'feed'); ?>">Gestion des abonnements</a></li>
diff --git a/app/layout/nav_menu.phtml b/app/layout/nav_menu.phtml
index 4deb20836..90fe4aea1 100644
--- a/app/layout/nav_menu.phtml
+++ b/app/layout/nav_menu.phtml
@@ -1,5 +1,5 @@
 <div class="nav_menu">
-	<!--<a class="btn" href="#aside_flux"><i class="icon i_configure"></i></a>-->
+	<a class="btn toggle_aside" href="#aside_flux"><i class="icon i_category"></i></a>
 
 	<a class="btn" href="<?php echo _url ('feed', 'actualize'); ?>"><i class="icon i_refresh"></i></a>
 
diff --git a/public/theme/freshrss.css b/public/theme/freshrss.css
index d15487db3..46b8cb57b 100644
--- a/public/theme/freshrss.css
+++ b/public/theme/freshrss.css
@@ -391,9 +391,14 @@
 		line-height: 16px;
 	}
 
+.toggle_aside, .btn.toggle_aside {
+	display: none;
+}
+
 @media(max-width: 840px) {
 	.header,
-	.aside,
+	.aside .btn-important,
+	.aside .feeds .dropdown,
 	.flux_header .item.website span,
 	.flux_header .item.date {
 		display: none;
@@ -405,4 +410,35 @@
 	.pagination .pager-previous, .pagination .pager-next {
 		width: 100px;
 	}
+
+	.toggle_aside, .btn.toggle_aside {
+		display: inline-block;
+	}
+	.aside {
+		position: fixed;
+		top: 0; left: 0;
+		width: 0;
+		overflow: hidden;
+		z-index: 10;
+		transition: width 200ms linear;
+	}
+		.aside:target {
+			width: 80%;
+			overflow: auto;
+		}
+		.aside .toggle_aside {
+			position: absolute;
+			right: 0;
+			display: inline-block;
+			width: 20px;
+			height: 20px;
+			margin: 0 10px 0 0;
+			border: 1px solid #ccc;
+			border-radius: 10px;
+			text-align: center;
+			line-height: 20px;
+		}
+		.aside .categories {
+			margin: 30px 0;
+		}
 }
diff --git a/public/theme/global.css b/public/theme/global.css
index ad6521c54..3262036be 100644
--- a/public/theme/global.css
+++ b/public/theme/global.css
@@ -454,3 +454,6 @@ input, select, textarea {
 	.icon.i_note_empty {
 		background-image: url("icons/note_empty.svg");
 	}
+	.icon.i_category {
+		background-image: url("icons/category.svg");
+	}
diff --git a/public/theme/icons/category.svg b/public/theme/icons/category.svg
new file mode 100644
index 000000000..71f95490e
--- /dev/null
+++ b/public/theme/icons/category.svg
@@ -0,0 +1,31 @@
+<?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='folder-symbolic.svg' version='1.1' inkscape:version='0.48.0 r9654' 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='-173.07332' pagecolor='#555753' borderopacity='1' showborder='false' inkscape:bbox-paths='false' guidetolerance='10' inkscape:window-width='1310' showguides='true' inkscape:object-nodes='true' inkscape:snap-bbox='true' inkscape:pageshadow='2' inkscape:guide-bbox='true' inkscape:snap-nodes='true' bordercolor='#666666' objecttolerance='10' id='namedview88' showgrid='false' inkscape:window-maximized='0' inkscape:window-x='52' inkscape:snap-global='true' inkscape:window-y='24' gridtolerance='10' inkscape:window-height='690' inkscape:snap-to-guides='true' inkscape:current-layer='layer13' inkscape:zoom='1' inkscape:cx='-157.67647' 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(-442,-176)' inkscape:groupmode='layer' id='layer9' style='display:inline'/>
+  <g inkscape:label='devices' transform='translate(-442,-176)' inkscape:groupmode='layer' id='layer10'/>
+  <g inkscape:label='apps' transform='translate(-442,-176)' inkscape:groupmode='layer' id='layer11'/>
+  <g inkscape:label='actions' transform='translate(-442,-176)' inkscape:groupmode='layer' id='layer12'/>
+  <g inkscape:label='places' transform='translate(-442,-176)' inkscape:groupmode='layer' id='layer13'>
+    <g transform='translate(234.0002,-820)' id='g14154'>
+      <path inkscape:connector-curvature='0' d='m 208.53105,997 c -0.28913,0 -0.53125,0.24212 -0.53125,0.53125 l 0,13.93755 c 0,0.2985 0.23264,0.5312 0.53125,0.5312 l 14.9375,0 c 0.2986,0 0.53125,-0.2326 0.53125,-0.5312 l 0,-8.9376 c 0,-0.2891 -0.24212,-0.5312 -0.53125,-0.5312 l -12.46875,0 0,7.5 c 0,0.277 -0.223,0.5 -0.5,0.5 -0.277,0 -0.5,-0.223 -0.5,-0.5 l 0,-8 c 0,-0.277 0.223,-0.5 0.5,-0.5 l 2.96875,0 8.53125,0 0,-1.4062 c 0,-0.3272 -0.26666,-0.5938 -0.59375,-0.5938 l -7.40625,0 0,-1.46875 C 213.9998,997.2421 213.75768,997 213.46855,997 z' id='rect3845' sodipodi:nodetypes='ccccccccccsccccccccccc' style='fill:#666666;fill-opacity:1;stroke:none;display:inline'/>
+      
+    </g>
+  </g>
+  <g inkscape:label='mimetypes' transform='translate(-442,-176)' inkscape:groupmode='layer' id='layer14'/>
+  <g inkscape:label='emblems' transform='translate(-442,-176)' inkscape:groupmode='layer' id='layer15' style='display:inline'/>
+</svg>