Mise en place dialogue About. Accessible depuis page annotations et home pag

@TODO: remplir avec le contenu...

adim_project/adim_app/static/_src/less/adim.css

@@ -399,7 +399,7 @@ body.home.authenticated #home-container #home-action-box .well {
     bottom: -10px;
   }
   #home-container #home-action-box .panel-collapse {
-    padding: 0px;
+    padding: 0;
   }
   #home-container #home-action-box .btn-lg {
     border-radius: 4px;
@@ -420,11 +420,11 @@ body.home.authenticated #home-container #home-action-box .well {
 }
 #home-image img {
   border-radius: 6px;
-  background: url("../img/image-home.jpg") 0% 50% no-repeat;
+  background: url("../img/image-home.jpg") 0 50% no-repeat;
 }
 @media (min-width: 1200px) {
   #home-image img {
-    background: url("../img/image-home-lg.jpg") 0% 50% no-repeat;
+    background: url("../img/image-home-lg.jpg") 0 50% no-repeat;
     background-size: 1140px 761px;
     width: 1140px;
     height: 761px;
@@ -432,7 +432,7 @@ body.home.authenticated #home-container #home-action-box .well {
 }
 @media (min-width: 992px) and (max-width: 1199px) {
   #home-image img {
-    background: url("../img/image-home-lg.jpg") 0% 50% no-repeat;
+    background: url("../img/image-home-lg.jpg") 0 50% no-repeat;
     background-size: 940px 628px;
     width: 940px;
     height: 628px;
@@ -440,7 +440,7 @@ body.home.authenticated #home-container #home-action-box .well {
 }
 @media (min-width: 768px) and (max-width: 991px) {
   #home-image img {
-    background: url("../img/image-home-sm.jpg") 0% 50% no-repeat;
+    background: url("../img/image-home-sm.jpg") 0 50% no-repeat;
     background-size: 720px 525px;
     width: 720px;
     height: 525px;
@@ -465,7 +465,7 @@ body.home.authenticated #home-container #home-action-box .well {
 #main-home .intro h1 {
   color: #f2f2f2;
   font-size: 32px;
-  margin-top: 0px;
+  margin-top: 0;
   text-shadow: 0 1px 0 #FFF;
 }
 #main-home .intro .lead {
@@ -473,12 +473,12 @@ body.home.authenticated #home-container #home-action-box .well {
   color: #ffffff;
 }
 #login-mode {
-  margin-bottom: 0px;
+  margin-bottom: 0;
 }
 #login-mode .local-login-head {
   position: absolute;
   right: 15px;
-  bottom: 0px;
+  bottom: 0;
 }
 #login-mode .local-login-head a,
 #login-mode .local-login-head a:link,
@@ -521,6 +521,9 @@ body.home.authenticated #home-container #home-action-box .well {
 #login-mode #login-local-panel input.form-control::-webkit-input-placeholder {
   color: #aaaaaa;
 }
+body.home #dlg-about-adim .modal-dialog {
+  margin-top: 150px;
+}
 #dlg-about-adim .modal-footer {
   padding: 5px;
 }
@@ -534,6 +537,41 @@ body.home.authenticated #home-container #home-action-box .well {
 #dlg-about-adim .logo:visited {
   color: #0096c7;
   text-decoration: none;
+  font-size: 65px;
+  display: block;
+  text-align: center;
+  margin-top: 30px;
+}
+#dlg-about-adim .about-links {
+  padding-left: 10px;
+}
+#dlg-about-adim .about-links li {
+  padding: 2px 0;
+}
+#dlg-about-adim .about-links a,
+#dlg-about-adim .about-links a:link,
+#dlg-about-adim .about-links a:visited {
+  color: #0096c7;
+  text-decoration: none;
+}
+#dlg-about-adim .about-links a:hover,
+#dlg-about-adim .about-links a:active {
+  color: #007094;
+}
+#dlg-about-adim .modal-body .row > div {
+  min-height: 180px;
+}
+#dlg-about-adim .modal-body .row > div:first-child {
+  border-right: 1px solid #0096c7;
+}
+#dlg-about-adim .about-content .panel {
+  background-color: transparent;
+  box-shadow: none;
+  border: 0;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
+  margin: 0;
 }
 #main-navbar {
   min-width: 790px;
@@ -782,7 +820,7 @@ body.home.authenticated #home-container #home-action-box .well {
   text-align: center;
   border-radius: 12px;
   border: solid 8px rgba(0, 0, 0, 0.2);
-  margin: -55px auto 0px;
+  margin: -55px auto 0;
 }
 .canvas-container .dropzone .dropzone-inner-wrapper .dropzone-inner {
   padding: 20px;
@@ -796,12 +834,9 @@ canvas {
 }
 #canvas-bbar {
   background-color: #cccccc;
-  padding: 2px 6px 0px;
+  padding: 2px 6px 0;
   line-height: 1px;
-  border-top-right-radius: 0;
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-  border-top-left-radius: 0;
+  border-radius: 0 0 4px 4px;
 }
 #canvas-bbar label {
   float: left;
@@ -2131,8 +2166,7 @@ fieldset[disabled] .category-list .btn-cat[data-category="cat_8"].active {
 }
 #tool-colorselect .color-menu > li > a:hover,
 #tool-colorselect .color-menu > li > a:focus {
-  background-color: #333330;
-  background-image: none;
+  background: #333330 none;
   border-color: transparent;
 }
 #tool-colorselect .color-menu > li > a.c1,
@@ -2236,7 +2270,7 @@ fieldset[disabled] .category-list .btn-cat[data-category="cat_8"].active {
 }
 .sldr .slider.slider-horizontal .slider-handle {
   background-size: 10px 20px;
-  background-position: 5px 0px;
+  background-position: 5px 0;
 }
 .btn-group-vertical .sldr {
   width: 40px;
@@ -2261,8 +2295,7 @@ fieldset[disabled] .category-list .btn-cat[data-category="cat_8"].active {
   background-position: 0 -50px;
 }
 .btn-group-vertical .sldr.disabled {
-  background-image: none;
-  background-color: #e0e0e0;
+  background: #e0e0e0 none;
 }
 .btn-group-vertical .sldr .tooltip {
   text-shadow: none;

adim_project/adim_app/static/_src/less/adim.less

@@ -367,7 +367,7 @@ body.home {
                 bottom: -10px;
             }
             .panel-collapse {
-                padding: 0px;
+                padding: 0;
             }
             .btn-lg {
                 border-radius: 4px;
@@ -391,11 +391,11 @@ body.home {
     margin-bottom: 40px;
     img {
         border-radius: 6px;
-        background: url("../img/image-home.jpg") 0% 50% no-repeat;
+        background: url("../img/image-home.jpg") 0 50% no-repeat;
 
         // Large
         @media (min-width: @screen-lg-min) {
-            background: url("../img/image-home-lg.jpg") 0% 50% no-repeat;
+            background: url("../img/image-home-lg.jpg") 0 50% no-repeat;
             background-size: 1140px 761px;
             width: 1140px;
             height: 761px;
@@ -403,14 +403,14 @@ body.home {
         // Medium
         @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
 //            background: url("../img/image-home-md.jpg") 0% 50% no-repeat;
-            background: url("../img/image-home-lg.jpg") 0% 50% no-repeat;
+            background: url("../img/image-home-lg.jpg") 0 50% no-repeat;
             background-size: 940px 628px;
             width: 940px;
             height: 628px;
         }
         // Small
         @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
-            background: url("../img/image-home-sm.jpg") 0% 50% no-repeat;
+            background: url("../img/image-home-sm.jpg") 0 50% no-repeat;
             background-size: 720px 525px;
             width: 720px;
             height: 525px;
@@ -440,7 +440,7 @@ body.home {
         h1 {
             color: @home-color;
             font-size: 32px;
-            margin-top: 0px;
+            margin-top: 0;
             text-shadow: 0 1px 0 #FFF;
         }
         .lead {
@@ -453,13 +453,13 @@ body.home {
 
 #login-mode {
     @local-login-link: lighten(@brand-primary, 20%);
-    margin-bottom: 0px;
+    margin-bottom: 0;
 
     .local-login-head {
         //        .clearfix();
         position: absolute;
         right: 15px;
-        bottom: 0px;
+        bottom: 0;
         a, a:link, a:active, a:visited, a:hover {
             font-size: 12px;
             font-weight: 300;
@@ -499,6 +499,11 @@ body.home {
 // ---------
 
 #dlg-about-adim {
+
+    body.home & .modal-dialog {
+        margin-top: 150px;
+    }
+
     .modal-footer {
         padding: 5px;
         p {
@@ -509,6 +514,36 @@ body.home {
     .logo:active, .logo:visited {
         color: @unil-logo-blue;
         text-decoration: none;
+        font-size: 65px;
+        display: block;
+        text-align: center;
+        margin-top: 30px;
+    }
+    .about-links {
+        padding-left: 10px;
+        li { padding: 2px 0; }
+        a, a:link, a:visited {
+            color: @unil-logo-blue;
+            text-decoration: none;
+        }
+        a:hover, a:active {
+            color: darken(@unil-logo-blue, 10%);
+        }
+    }
+    .modal-body .row > div {
+        min-height: 180px;
+        &:first-child {
+            border-right: 1px solid @unil-logo-blue;
+        }
+    }
+    .about-content .panel {
+        background-color: transparent;
+        box-shadow: none;
+        border: 0;
+        -webkit-border-radius: 0;
+        -moz-border-radius: 0;
+        border-radius: 0;
+        margin: 0;
     }
 }
 
@@ -862,7 +897,7 @@ body.home {
             text-align: center;
             border-radius: 12px;
             border: solid 8px rgba(0, 0, 0, 0.2);
-            margin: -55px auto 0px;
+            margin: -55px auto 0;
 
             .dropzone-inner {
                 padding: 20px;
@@ -881,13 +916,10 @@ canvas {
 
 #canvas-bbar {
     background-color: @canvas-bbar-dark-bg;
-    padding: 2px 6px 0px;
+    padding: 2px 6px 0;
     line-height: 1px;
 
-    border-top-right-radius: 0;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-    border-top-left-radius: 0;
+    border-radius: 0 0 4px 4px;
 
     label {
         float: left;
@@ -1408,8 +1440,7 @@ canvas {
                 box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.66) inset, 0 0 2px 0 rgba(255, 255, 255, 0.5), 0 2px 2px -1px rgba(255, 255, 255, 0.33);
 
                 &:hover, &:focus {
-                    background-color: #333330;
-                    background-image: none;
+                    background: #333330 none;
                     border-color: transparent;
                 }
 
@@ -1514,7 +1545,7 @@ canvas {
         }
         &.slider-horizontal .slider-handle {
             background-size: 10px 20px;
-            background-position: 5px 0px;
+            background-position: 5px 0;
         }
 
     }
@@ -1544,8 +1575,7 @@ canvas {
         background-position: 0 -50px;
     }
     &.disabled {
-        background-image: none;
-        background-color: darken(@btn-default-bg, 12%);
+        background: darken(@btn-default-bg, 12%) none;
     }
 
     .tooltip {

adim_project/templates/adim/_about-modal.inc.html

+<div class="modal" id="dlg-about-adim">
+    <div class="modal-dialog">
+        <div class="modal-content">
+
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal"><span
                         aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
@@ -5,24 +9,48 @@
             </div>
             <div class="modal-body">
                 <div class="row">
-                        <div class="col-sm-7">
+                    <div class="col-sm-4">
                         <a href="http://www.unil.ch/" class="logo unilogo-unil"></a>
                     </div>
-                        <div class="col-sm-5">
-                            <ul class="list-unstyled small">
-                                <li><br/></li>
-                                <li><a href="#contacts.html" onclick="return false">
+                    <div class="col-sm-8 about-content">
+                        <ul class="nav nav-tabs small" role="tablist">
+                            <li class="active" role="presentation">
+                                <a href="#adim-about-body-contacts" role="tab" data-toggle="tab">
                                     <span class="glyphicon glyphicon-envelope"></span>&nbsp;
-                                    Contacts</a></li>
-                                <li><a href="#credits.html" onclick="return false">
+                                    Contacts
+                                </a>
+                            </li>
+                            <li role="presentation">
+                                <a href="#adim-about-body-credits" role="tab" data-toggle="tab">
                                     <span class="glyphicon glyphicon-glass"></span>&nbsp;
                                     Credits
-                                </a></li>
-                                <li><a href="#legal_info.html" onclick="return false">
+                                </a>
+                            </li>
+                            <li role="presentation">
+                                <a href="#adim-about-body-legal" role="tab" data-toggle="tab">
                                     <span class="glyphicon glyphicon-briefcase"></span>&nbsp;
-                                    Informations légale
-                                </a></li>
+                                    Informations légales
+                                </a>
+                            </li>
                         </ul>
+
+                        <div class="tab-content">
+                            <div id="adim-about-body-contacts" class="tab-pane active" role="tabpanel">
+                                <div class="text-center">
+                                    <br/><em class="text-info">Contenu en cours de rédaction</em>
+                                </div>
+                            </div>
+                            <div id="adim-about-body-credits" class="tab-pane" role="tabpanel">
+                                <div class="text-center">
+                                    <br/><em class="text-info">Contenu en cours de rédaction</em>
+                                </div>
+                            </div>
+                            <div id="adim-about-body-legal" class="tab-pane" role="tabpanel">
+                                <div class="text-center">
+                                    <br/><em class="text-info">Contenu en cours de rédaction</em>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -31,3 +59,7 @@
                     &copy; 2015 Unil &mdash; <a href="http://www.unil.ch/">Université de Lausanne</a>
                 </p>
             </div>
+
+        </div>
+    </div>
+</div>
\ No newline at end of file

adim_project/templates/adim/base_annotation.html

@@ -157,14 +157,9 @@
         </div>
     </div>
 
-{#  -- About -- #}
-    <div class="modal" id="dlg-about-adim">
-        <div class="modal-dialog">
-            <div class="modal-content">
+{#  -- About Dlg -- #}
     {% include "adim/_about-modal.inc.html" %}
-            </div>
-        </div>
-    </div>
+
 
 {% endblock modals %}
 

adim_project/templates/adim/home.html

@@ -88,15 +88,15 @@
                 <a href="http://www.unil.ch/" class="logo unilogo-unil"></a>
             </div>
             <div class="col-sm-4">
-                <ul class="list-unstyled small">
-                    <li><a href="#contacts.html" onclick="return false">
+                <ul class="list-unstyled small about-links">
+                    <li><a href="#contacts"  data-tab="#adim-about-body-contacts">
                         <span class="glyphicon glyphicon-envelope"></span>&nbsp;
                         Contacts</a></li>
-                    <li><a href="#credits.html" onclick="return false">
+                    <li><a href="#credits" data-tab="#adim-about-body-credits">
                         <span class="glyphicon glyphicon-glass"></span>&nbsp;
                         Credits
                     </a></li>
-                    <li><a href="#legal_info.html" onclick="return false">
+                    <li><a href="#info_legale" data-tab="#adim-about-body-legal">
                         <span class="glyphicon glyphicon-briefcase"></span>&nbsp;
                         Informations légale
                     </a></li>
@@ -111,6 +111,8 @@
 
 {#    <iframe sandbox="allow-same-origin" src="{% url "shib-login" %}" width="0" height="0"></iframe>#}
 
+{% include "adim/_about-modal.inc.html" %}
+
 {% endblock main_content %}
 
 {% block main_container %}{% endblock %}
@@ -120,6 +122,22 @@
     <script src="{% static "js/libs/jquery.min.js" %}"></script>