responsive

diff --git a/teleforma/static/teleforma/css/teleforma.css b/teleforma/static/teleforma/css/teleforma.css
index 7361975a8cc86aa7caa411d9064034543bc8b4f7..02121ce8a52cc4219d248248944afcaafabb16b6 100644 (file)
--- a/teleforma/static/teleforma/css/teleforma.css
+++ b/teleforma/static/teleforma/css/teleforma.css
@@ -59,8 +59,9 @@ a img { border: none; }
 #content {
     /*margin-top: 1em;*/
     position: relative;
-       max-width:1200px;
-       margin: 0 auto;
+       margin-left: 3%;
+margin-right: 2em;
+margin-bottom: 0em;
 }
 
 #content ul, #content ul ul, #content ol {
@@ -471,8 +472,8 @@ form.login .submit {
        border-top: 0;
     font: normal verdana,'Bitstream Vera Sans',helvetica,arial,sans-serif;
     padding-left: 0;
-       max-width: 1200px;
-       margin: 0 auto;
+       margin-left: 3%;
+       margin-right: 2em;
 }
 
 #menu a, #menu a:visited{
@@ -489,7 +490,7 @@ form.login .submit {
     border-top-right-radius: 5px 5px;
     font-weight: bold;
     font-size: 14px;
-    padding: .5em 1em;
+    padding: .5em 1.5em;
 }
 
 #menu a:hover, #menu a.active{
@@ -565,25 +566,22 @@ color:#FFF;
     width: 100%;
     float:left;
     border-bottom:0px solid #fff;
-    background:no-repeat url(/static/telemeta/images/tw_hd.png) 0 0;
-    background-color:#ebebeb;
-    background-repeat:repeat;
+    background: #494949; /* Old browsers */
+       background: -moz-linear-gradient(top, #494949 3%, #0e0e0e 52%); /* FF3.6-15 */
+       background: -webkit-linear-gradient(top, #494949 3%,#0e0e0e 52%); /* Chrome10-25,Safari5.1-6 */
+       background: linear-gradient(to bottom, #494949 3%,#0e0e0e 52%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494949', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
+       border-radius: 0;
 }
 
 /* display block will make the link fill the whole area of LI */
 #nav ul a {
     display:block;
     height: auto;
-    padding: 0.8em 0.5em 0.5em 0.5em;
+    padding: 0.8em 0.3em 0.8em 0.3em;
 /*     font-size: 0.9em; */
     text-align:left;
-    -webkit-border-top-left-radius:0px 0px;
-    moz-border-radius-topleft: 0px 0px;
-    border-top-left-radius: 0px 0px;
-    -webkit-border-top-right-radius:0px 0px;
-    moz-border-radius-topright: 0px 0px;
-    border-top-right-radius: 0px 0px;
-    border-bottom-width: 0px;
+    border-radius: 0;
 }
 
 #nav ul a:hover {
@@ -2448,6 +2446,9 @@ button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra pad
                padding-left: 20px;
                padding-right: 20px;
        }
+       #content, #menu{
+               margin: 0;      
+       }
 }
 
 /**/
@@ -2456,13 +2457,25 @@ button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra pad
        
        #nav ul li{
                background-image: none;
-               background: #3b3b3b; /* Old browsers */
-               background: -moz-linear-gradient(top, #3b3b3b 0%, #2c2c2c 100%); /* FF3.6-15 */
-               background: -webkit-linear-gradient(top, #3b3b3b 0%,#2c2c2c 100%); /* Chrome10-25,Safari5.1-6 */
-               background: linear-gradient(to bottom, #3b3b3b 0%,#2c2c2c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-               filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b3b3b', endColorstr='#2c2c2c',GradientType=0 ); /* IE6-9 */
-       }
+               /*background: #3b3b3b;
+               background: -moz-linear-gradient(top, #3b3b3b 0%, #2c2c2c 100%); 
+               background: -webkit-linear-gradient(top, #3b3b3b 0%,#2c2c2c 100%); 
+               background: linear-gradient(to bottom, #3b3b3b 0%,#2c2c2c 100%); 
+               filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b3b3b', endColorstr='#2c2c2c',GradientType=0 );*/ 
                
+               background: #494949; /* Old browsers */
+               background: -moz-linear-gradient(top, #494949 3%, #0e0e0e 52%); /* FF3.6-15 */
+               background: -webkit-linear-gradient(top, #494949 3%,#0e0e0e 52%); /* Chrome10-25,Safari5.1-6 */
+               background: linear-gradient(to bottom, #494949 3%,#0e0e0e 52%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+               filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494949', endColorstr='#0e0e0e',GradientType=0 ); 
+
+       }
+       #menu a, #menu a:visited{
+               padding: .5em 1em;
+       }
+       #nav ul a{
+               font-size: 0.8em;       
+       }       
                
        #module-set {
                float: none;
@@ -2475,11 +2488,12 @@ button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra pad
                margin: 0;
                overflow: hidden;
                background-image: none;
-               background: #3b3b3b; /* Old browsers */
-               background: -moz-linear-gradient(top, #3b3b3b 0%, #2c2c2c 100%); /* FF3.6-15 */
-               background: -webkit-linear-gradient(top, #3b3b3b 0%,#2c2c2c 100%); /* Chrome10-25,Safari5.1-6 */
-               background: linear-gradient(to bottom, #3b3b3b 0%,#2c2c2c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-               filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b3b3b', endColorstr='#2c2c2c',GradientType=0 ); /* IE6-9 */
+               background: #494949; /* Old browsers */
+               background: -moz-linear-gradient(top, #494949 3%, #0e0e0e 52%); /* FF3.6-15 */
+               background: -webkit-linear-gradient(top, #494949 3%,#0e0e0e 52%); /* Chrome10-25,Safari5.1-6 */
+               background: linear-gradient(to bottom, #494949 3%,#0e0e0e 52%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+               filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494949', endColorstr='#0e0e0e',GradientType=0 ); 
+
        }
        #module-set .module .msg input[type="submit"]{
                width: 120px;
@@ -2515,7 +2529,7 @@ button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra pad
        
        .desk_center{
                float: left;
-               width: 76%;
+               width: 74%;
                padding: 0em 0em 0em 1em;
                overflow-y: auto;
        }
@@ -2594,6 +2608,10 @@ button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra pad
                font-size: 12px;
        }
        
+       #nav ul a{
+               font-size: 0.7em;       
+       }       
+       
        form.login:after {
                content: ""; 
                display: table;
@@ -2672,7 +2690,7 @@ button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra pad
                width: 26% !important;
        }
        .desk_messages, .desk_large, .desk_center.home {
-       width: 74% !important;
+       width: 71% !important;
        }
        .course_media  {
                width: 74%;
@@ -2685,6 +2703,8 @@ button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra pad
 
 
 @media (max-width: 660px) {
+       
+       
        #module-set-left {
                width: 100% !important;
                padding: 0;
@@ -2811,11 +2831,33 @@ button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra pad
        #users table th:nth-child(6),#users table th:nth-child(7){
                width: 70px;
        }
-
+       .nv-controlsWrap.nvd3-svg{
+               transform: translate(-80px,-70px) !important
+       }
 }
 
 @media (max-width: 440px) {
        
+       .nv-controlsWrap.nvd3-svg{
+               transform: translate(-86px,-70px) !important
+       }
+       
+       .nv-legendWrap.nvd3-svg{
+               transform: translate(230px,-70px) !important
+       }
+       
+       #nav ul{
+               width: 120%;
+               left: 50%; /* poussé de la moitié de hauteur du référent */
+                       -ms-transform: translateX(-50%); /* IE 9 */
+                       -webkit-transform: translateX(-50%); /* Chrome, Safari, Opera */
+                       transform: translateX(-50%); /* tiré de la moitié de sa propre hauteur */
+       }
+       
+       #nav ul a {
+               font-size: 0.8em;
+       }
+
        .desk_center.home .video{
                max-width: 100%;
        }
@@ -2864,4 +2906,7 @@ button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra pad
                margin-left: 0;
                width: 60%;
        }
-}
\ No newline at end of file
+       
+       
+}
+

diff --git a/teleforma/static/teleforma/images/actus.png b/teleforma/static/teleforma/images/actus.png
index 4559cc1e665e84dea009c7be226f001e155d22d0..5272cf2cb46e52885704c844192de94a30501fce 100644 (file)
Binary files a/teleforma/static/teleforma/images/actus.png and b/teleforma/static/teleforma/images/actus.png differ

diff --git a/teleforma/static/teleforma/images/pencil-edit-button.png b/teleforma/static/teleforma/images/pencil-edit-button.png
new file mode 100644 (file)
index 0000000..0e1ca73
Binary files /dev/null and b/teleforma/static/teleforma/images/pencil-edit-button.png differ

diff --git a/teleforma/static/teleforma/images/rubbish-bin-delete-button.png b/teleforma/static/teleforma/images/rubbish-bin-delete-button.png
new file mode 100644 (file)
index 0000000..283f99d
Binary files /dev/null and b/teleforma/static/teleforma/images/rubbish-bin-delete-button.png differ

diff --git a/teleforma/templates/teleforma/inc/newsitem.html b/teleforma/templates/teleforma/inc/newsitem.html
index 289399b489f15c6b0648ede3f250c70c242b74f3..1c8a43efe7902b674fade810a9b5745a477839f0 100644 (file)
--- a/teleforma/templates/teleforma/inc/newsitem.html
+++ b/teleforma/templates/teleforma/inc/newsitem.html
@@ -1,3 +1,5 @@
+{% load static %}
+
 <div class="newsitem">
     <header>
         <h3>{{ newsitem.title }}</h3>
@@ -5,12 +7,13 @@
         <ul class="actions">
                {% if newsitem.can_edit %}
                <li>
-                       <a href="{% url newsitem-update pk=newsitem.id %}?period_id={{ period_id }}"><img src="/static/telemeta/images/pencil-edit-button.png" alt="éditer"/></a>
+                       <a href="{% url newsitem-update pk=newsitem.id %}?period_id={{ period_id }}"><img src="{% static 'teleforma/images/pencil-edit-button.png' %}" alt="éditer"/>
+</a>
                </li>
                {% endif %}
                {% if newsitem.can_delete %}
                <li>
-                       <a href="{% url newsitem-delete pk=newsitem.id %}?period_id={{ period_id }}"><img src="/static/telemeta/images/rubbish-bin-delete-button.png" alt="supprimer"/></a>
+                       <a href="{% url newsitem-delete pk=newsitem.id %}?period_id={{ period_id }}"><img src="{% static 'teleforma/images/rubbish-bin-delete-button.png' %}" alt="supprimer"/></a>
                </li>
                {% endif %}
         </ul>          

diff --git a/teleforma/templates/teleforma/inc/newsitems_portlet.html b/teleforma/templates/teleforma/inc/newsitems_portlet.html
index 6f333647ca02712ada299d166d3571ad19bc21d0..ce862d28057527e8aebd5a8f377e0655f912dc28 100644 (file)
--- a/teleforma/templates/teleforma/inc/newsitems_portlet.html
+++ b/teleforma/templates/teleforma/inc/newsitems_portlet.html
@@ -4,7 +4,7 @@
 {% load teleforma_tags %}
 
 <div class="tabs module">
-    <h3><img src="{% static "teleforma/images/actus.png" %}" alt="actualités"/>Actualités</h3>
+    <h3><img src="{% static 'teleforma/images/actus.png' %}" alt="actualités"/>Actualités</h3>
     <ul>
         <li><a href="#news_local">{{ course.title_tweeter }}</a>
             {% if can_add %}<a href="{% url newsitem-create %}?course_id={{course.id}}&period_id={{period_id}}">+</a>{% endif %}

diff --git a/teleforma/templates/telemeta/base.html b/teleforma/templates/telemeta/base.html
index 1e9834b5f5891b7a930ba7b4293e4f54b42d49c4..80487b4c3f1761b3c09d349cd59b9e8d746f915b 100644 (file)
--- a/teleforma/templates/telemeta/base.html
+++ b/teleforma/templates/telemeta/base.html
@@ -10,10 +10,11 @@
 {% get_available_languages as LANGUAGES %}
 <html xmlns="http://www.w3.org/1999/xhtml" lang="{{ LANGUAGE_CODE }}" xml:lang="{{ LANGUAGE_CODE }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}><head>
 <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
-<meta name="Viewport" content="width=device-width" />
+<!--<meta name="Viewport" content="width=device-width" />
 <meta name="Viewport" content="initial-scale=1.0" />
 <meta name="Viewport" content="maximum-scale=1.5" />
-<meta name="Viewport" content="user-scalable=1" />
+<meta name="Viewport" content="user-scalable=1" />-->
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 <link rel="icon" href="/static/teleforma/images/favicon.ico"/>