Gitlab CSE Unil

Commit 7b26ecb1 authored by Julien Furrer's avatar Julien Furrer
Browse files

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

@TODO: remplir avec le contenu...
parent c6c60449
......@@ -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;
......
......@@ -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 {
......
<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>
<h4 class="modal-title">A propos d'ADIM</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-7">
<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="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>
<h4 class="modal-title">A propos d'ADIM</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-4">
<a href="http://www.unil.ch/" class="logo unilogo-unil"></a>
</div>
<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>
</ul>
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 class="modal-footer">
<p class="small text-center">
&copy; 2015 Unil &mdash; <a href="http://www.unil.ch/">Université de Lausanne</a>
</p>
</div>
\ No newline at end of file
</div>
<div class="modal-footer">
<p class="small text-center">
&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
......@@ -157,14 +157,9 @@
</div>
</div>
{# -- About -- #}
<div class="modal" id="dlg-about-adim">
<div class="modal-dialog">
<div class="modal-content">
{% include "adim/_about-modal.inc.html" %}
</div>
</div>
</div>
{# -- About Dlg -- #}
{% include "adim/_about-modal.inc.html" %}
{% endblock modals %}
......
......@@ -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>
<script src="{% static "js/libs/bootstrap.min.js" %}"></script>
<script>
(function($){
// Display About Dlg when info link in footer are clicked. Select corresponding tab in the modal dlg
$(function(){
var aboutDlgTabList = $("#dlg-about-adim").find("ul[role=tablist]");
$("#main-footer").find(".about-links a").on('click', function(evt){
evt.preventDefault();
$("#dlg-about-adim").modal();
var tabTgt = $(evt.target).data('tab'),
tabEl = aboutDlgTabList.find("[href=" + tabTgt + "]");
tabEl.tab('show');
});
});
})(jQuery);
</script>
{% comment %} {% if user.is_anonymous %}<script>
if (document.location.search.match(/next=/)) {
$.get("{% url "shib-display" %}")
......
......@@ -73,10 +73,9 @@
{% block content_js %}{% endblock %}
{% block post_js %}{% endblock %}
{% block requirejs_bootstrap %}
{% endblock %}
{#{% block requirejs_bootstrap %}{% endblock %}#}
{% endblock page_body %}</body>
</html>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment