Fixes in css

paramecio/citoplasma/templates/utils/list.phtml

@@ -30,24 +30,24 @@
 <table class="table_list">
     <tr class="title_list">
         % for field in simplelist.fields_showed:
-            <td><a href="${add_get_parameters(simplelist.url, order_field=simplelist.model.fields[field].name, begin_page=simplelist.begin_page, order=simplelist.change_order[field], search_text=simplelist.search_text, search_field=simplelist.search_field)}" class="${set_css_arrow(simplelist, field)}">${simplelist.model.fields[field].label}</a></td>
+            <td class="${simplelist.model.fields[field].name}_td"><a href="${add_get_parameters(simplelist.url, order_field=simplelist.model.fields[field].name, begin_page=simplelist.begin_page, order=simplelist.change_order[field], search_text=simplelist.search_text, search_field=simplelist.search_field)}" class="${set_css_arrow(simplelist, field)}">${simplelist.model.fields[field].label}</a></td>
         % endfor 
         % for extra_field in simplelist.arr_extra_fields:
-            <td>${ extra_field }</td>
+            <td class="options_td">${ extra_field }</td>
         % endfor
     </tr>
     % for row in list:
     <tr class="row_list">
         % for field in simplelist.fields_showed:
             % if simplelist.model.fields[field].escape==True:
-                <td>${simplelist.model.fields[field].show_formatted(row[field])}</td>
+                <td class="${simplelist.model.fields[field].name}_td">${simplelist.model.fields[field].show_formatted(row[field])}</td>
             % else:
-                <td>${simplelist.model.fields[field].show_formatted(row[field])|n}</td>
+                <td class="${simplelist.model.fields[field].name}_td">${simplelist.model.fields[field].show_formatted(row[field])|n}</td>
             % endif
         % endfor
         
         % for extra_field_func in simplelist.arr_extra_options:
-            <td>${ simplelist.set_options(extra_field_func, row)|n }</td>
+            <td class="options_td">${ simplelist.set_options(extra_field_func, row)|n }</td>
         % endfor 
     </tr>
     % endfor 

paramecio/modules/admin/media/css/admin.css

@@ -120,9 +120,11 @@ p {
 {
 
 	float:left;
-	width:18%;
+	width:17%;
 	margin-right:0px;
 	position:relative;
+    border:solid #cccccc;
+    border-width:0px 1px 1px 0px;
 }
 
 #menu a
@@ -134,7 +136,8 @@ p {
 	color:#6183b0;
 	display:block;
 	border:solid #cccccc;
-	border-width:0px 1px 1px 1px;
+	/*border-width:0px 1px 1px 1px;*/
+    border-width:0px;
 	padding:5px;
 	background: #ececec;
 }
@@ -162,7 +165,7 @@ p {
 {
 
 	padding:5px;
-	font-size:22px;
+	font-size:18px;
 	font-family:"Helvetica", sans, serif;
 	font-weight:bold;
 	/*background-image:url('../images/background_title.png');
@@ -197,6 +200,19 @@ p {
     
 }
 
+#menu ul {
+
+    margin:0px;
+    /*border: solid #000 1px;*/
+    padding:0px;
+}
+
+#menu li {
+
+    border-width: 0px;
+
+}
+
 .content_admin 
 {
 
@@ -570,11 +586,12 @@ a:hover.no_choose_flag
 {
 
 	top:16px;
-	right:5px;
+	right:10px;
-    width:100px;
+    width:55px;
 	font-weight:bold;
 	font-size:12px;
     text-decoration: none;
+    /*border: solid #000 1px;*/
 }
 
 #logout a {
@@ -665,3 +682,119 @@ a.form_button_tab:hover
 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
 	
 }
+
+#toggle {
+
+    position:absolute;
+    left:10px;
+    top:0px;
+    z-index:1;
+    display:none;
+    
+
+}
+
+#toggle span {
+
+    display:none;
+
+}
+
+.first_canvas {
+
+    width:48%;
+    float:right;
+
+}
+
+.other_canvas {
+
+    width:48%;
+    float:left;
+
+}
+
+/* Media queries */
+
+@media only screen and (max-width: 800px) {
+    
+    #toggle {
+    
+        display:block;
+    
+    }
+    
+    #toggle span {
+
+        display:none;
+
+    }
+    
+    .contents {
+    
+        width:100%;
+    
+    }
+    
+    #menu {
+    
+        width:100%;
+    
+    }
+    #title_phango
+    {
+        font-size:18px;
+        text-align:center;
+        color: #555555;        
+        border: solid #000 0px;
+    }
+    
+    #title_framework
+    {
+    
+        display:none;
+    
+    }
+    
+    #header {
+    
+        text-align:center;
+    
+    }
+    
+    .ip_td {
+    
+        display:none;
+    
+    }
+    
+    .num_updates_td {
+    
+        display:none;
+    
+    }
+    
+    .first_canvas {
+
+        width:100%;
+        clear:both;
+
+    }
+    
+    .first_canvas canvas {
+    
+        border:solid  #000 1px;
+        height:300px;
+        display:block;
+    
+    }
+
+    .other_canvas {
+
+        width:100%;
+        clear:both;
+
+    }
+    
+}
+

paramecio/modules/admin/media/css/responsive-nav.css

@@ -0,0 +1,49 @@
+/*! responsive-nav.js 1.0.39 by @viljamis */
+
+.nav-collapse ul {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  display: block;
+  list-style: none;
+}
+
+.nav-collapse li {
+  width: 100%;
+  display: block;
+}
+
+.js .nav-collapse {
+  clip: rect(0 0 0 0);
+  max-height: 0;
+  position: absolute;
+  display: block;
+  overflow: hidden;
+  zoom: 1;
+}
+
+.nav-collapse.opened {
+  max-height: 9999px;
+}
+
+.nav-toggle {
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+}
+
+@media screen and (min-width: 40em) {
+  .js .nav-collapse {
+    position: relative;
+  }
+  .js .nav-collapse.closed {
+    max-height: none;
+  }
+  .nav-toggle {
+    display: none;
+  }
+}

paramecio/modules/admin/templates/admin/home.html

@@ -9,17 +9,16 @@ ${make_url('admin/'+module)}\
 <html>
 <head>                                                                                          
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>${title}</title>
-<!--<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
-<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
-<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>-->
 ${add_css_home_local('admin.css', 'admin')}
 ${add_css_home_local('font-awesome.min.css', 'admin')}
+${add_css_home_local('responsive-nav.css', 'admin')}
 ${add_js_home_local('jquery.min.js', 'admin')}
+${add_js_home_local('responsive-nav.min.js', 'admin')}
 ${HeaderHTML.css_home()|n}
 ${HeaderHTML.js_home()|n}
 ${HeaderHTML.header_home()|n}
-</head>
 <body>
 <div id="languages_general">
 </div>
@@ -29,6 +28,7 @@ ${HeaderHTML.header_home()|n}
 
 <div id="center_body">
     <div id="header">
+        <a href="#nav" id="toggle"><i class="fa fa-bars" aria-hidden="true"></i><span>Menu</span></a>
         <span id="title_phango">Paramecio</span> <span id="title_framework">Framework!</span> 
         <!--<div id="languages_general">
         <%def name="select_lang(i18n, lang_selected)">
@@ -47,30 +47,36 @@ ${HeaderHTML.header_home()|n}
         </div>-->
     </div>
     <div class="content_admin">
-        <div id="menu">
+        <nav id="menu" class="nav-collapse">
-            <div class="menu_title"><i class="fa fa-gear" aria-hidden="true"></i> ${lang('admin', 'applications', 'Applications')}</div>
+            <ul>
-            % for module in menu:
+                <li class="menu_title"><i class="fa fa-gear" aria-hidden="true"></i> ${lang('admin', 'applications', 'Applications')}</li>
-                % if type(menu[module]).__name__=='list':
+                % for module in menu:
-                    % if menu[module][0]!="":
+                    % if type(menu[module]).__name__=='list':
-                        <a href="${check_menu(module).strip()|n}"><i class="fa fa-circle-o" aria-hidden="true"></i> ${menu[module][0]}</a>
+                        % if menu[module][0]!="":
+                            <li><a href="${check_menu(module).strip()|n}"><i class="fa fa-circle-o" aria-hidden="true"></i> ${menu[module][0]}</a></li>
+                        % endif
+                    % else:
+                        % if menu[module]!="":
+                            <li><div class="father_admin">${menu[module]}</div></li>
+                        % endif
                     % endif
-                % else:
+                % endfor
-                    % if menu[module]!="":
+            </ul>
-                        <div class="father_admin">${menu[module]}</div>
+        </nav>
-                    % endif
-                % endif
-            % endfor
-        </div>
         <div class="contents">
             <h1>${title}</h1>
             <div class="content">
                 <%block name="content">
                 </%block>
             </div>
-        </div>
+        </nav>
     </div>
 </div>
 <div id="loading_ajax">
 </div>
+<script>
+    var navigation = responsiveNav(".nav-collapse", {customToggle: "#toggle"});
+</script>
+</head>
 </body>
 </html>