Commit 7d5faa4322608a7d3a3b75aa5843bb396a34f8cb

Authored by Zambom
1 parent 3652ee1c

Changing base to new patterns [Issue: #45]

app/templates/home.html 0 → 100644
@@ -0,0 +1 @@ @@ -0,0 +1 @@
  1 +{% load static i18n %}
0 \ No newline at end of file 2 \ No newline at end of file
app/templates/home_app.html
@@ -1,69 +0,0 @@ @@ -1,69 +0,0 @@
1 -{% extends 'base.html' %}  
2 -  
3 -{% load i18n %}  
4 -  
5 -{% block breadcrumbs %}  
6 -  
7 - {% clear_breadcrumbs %}  
8 - {% breadcrumb 'Home' '/' %}  
9 -  
10 -{% endblock %}  
11 -  
12 -{% block render_breadcrumbs %}  
13 - {% render_breadcrumbs %}  
14 -{% endblock %}  
15 -  
16 -{% block sidebar %}  
17 - <div class="btn-group-vertical">  
18 - <a href="javascript:void(0)" class="btn btn-raised">{% trans 'Pending tasks' %}</a>  
19 - <a href="javascript:void(0)" class="btn btn-raised" type="button" data-container="body" data-toggle="popover" data-placement="right" data-content="Gerson Rodriguez" >{% trans 'Users Online (1)' %}</a>  
20 - <a href="javascript:void(0)" class="btn btn-raised" button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{% trans 'Course' %} <span class="caret"></span></a>  
21 - <ul class="dropdown-menu" aria-labelledby="dLabel">  
22 - <a href="{% url 'course:create' %}" class="btn btn">{% trans 'Create Course' %}</a>  
23 - <a href="{% url 'course:manage' %}" class="btn btn">{% trans 'Manage Course' %}</a>  
24 - </ul>  
25 - </div>  
26 -{% endblock %}  
27 -  
28 -{% block content %}  
29 - <h4>  
30 - <strong>  
31 - <center>{% trans 'Courses' %}</center>  
32 - </strong>  
33 - </h4>  
34 -  
35 - {% if courses|length > 0 %}  
36 - {% for course in courses %}  
37 - <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-{{ course.slug }}-modal-sm">{{ course }}</button>  
38 - <div class="modal fade bs-{{ course.slug }}-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">  
39 - <div class="modal-dialog modal-sm" role="document">  
40 - <div class="modal-content">  
41 - <p> {{ course }}</p>  
42 - </div>  
43 - </div>  
44 - </div>  
45 - {% endfor %}  
46 - {% else %}  
47 - <p>{% trans "You didn't create any course yet." %}</p>  
48 - {% endif %}  
49 -{% endblock %}  
50 -  
51 -{% block rightbar %}  
52 - <div class="bs-callout bs-callout-info" id="callout-helper-context-color-specificity">  
53 - <h4>  
54 - <strong>  
55 - <center>{% trans 'Goals' %}</center>  
56 - </strong>  
57 - </h4>  
58 - <table class="table">  
59 - <tr>  
60 - <th scope="row"><input type="checkbox"/></th>  
61 - <td>70% de Presenca nas aulas</td>  
62 - </tr>  
63 - <tr>  
64 - <th scope="row"><input type="checkbox"/></th>  
65 - <td>30/11 - Entrega das notas finais</td>  
66 - </tr>  
67 - </table>  
68 - </div>  
69 -{% endblock rightbar %}  
core/static/css/base/amadeus.css
  1 +.logoLogin{
  2 + padding-bottom: 1%;
  3 + width: 15%;
  4 +}
1 .navigation{ 5 .navigation{
2 margin: 10% 10% 5% 5%; 6 margin: 10% 10% 5% 5%;
3 } 7 }
@@ -30,22 +34,219 @@ @@ -30,22 +34,219 @@
30 padding-bottom: 200px; 34 padding-bottom: 200px;
31 } 35 }
32 .panel-info{ 36 .panel-info{
33 - padding-bottom: 50px;  
34 } 37 }
35 -h3{  
36 - text-align: center; 38 +.panel-default{
  39 +}
  40 +.panel-primary .panel-body{
  41 + padding: 0% 0% 0% 0%;
  42 +}
  43 +.end{
  44 + text-align: right;
37 } 45 }
38 h5{ 46 h5{
39 text-align: center; 47 text-align: center;
40 } 48 }
  49 +#img {
  50 +
  51 + display: block;
  52 + margin: auto;
  53 + width: 50%;
41 54
42 -#logo{  
43 - max-width: 30%;  
44 - margin-top: 2em;  
45 - margin-bottom: 2em;  
46 } 55 }
  56 +ul {
  57 + list-style-type:none
  58 +}
  59 +
  60 +
  61 +/*CSS TIMELINE*/
  62 +
  63 +.bubble {
  64 + width: 100%;
  65 + padding: .5em 1em;
  66 + line-height: 1.4em;
  67 + padding: 20px;
  68 + background-color: #ecf0f1;
  69 + position: relative;
  70 + -webkit-border-radius: 8px;
  71 + -moz-border-radius: 8px;
  72 + -ms-border-radius: 8px;
  73 + -o-border-radius: 8px;
  74 + border-radius: 8px;
  75 + text-align: left;
  76 + display: inline-block; }
  77 + .bubble:hover > .over-bubble {
  78 + opacity: 1; }
  79 +
  80 +.bubble-container {
  81 + width: 75%;
  82 + display: block;
  83 + position: relative;
  84 + padding-left: 20px;
  85 + vertical-align: top;
  86 + display: inline-block; }
  87 +
  88 +.arrow {
  89 + content: '';
  90 + display: block;
  91 + position: absolute;
  92 + left: 12px;
  93 + bottom: 25%;
  94 + height: 0;
  95 + width: 0;
  96 + border-top: 20px solid transparent;
  97 + border-bottom: 20px solid transparent;
  98 + border-right: 20px solid #ecf0f1; }
  99 +
  100 +.timeline {
  101 + width: 560px;
  102 + display: block;
  103 + margin: auto;
  104 + background-color: #dde1e2;
  105 + padding-bottom: 2em;
  106 + -webkit-box-shadow: #bdc3c7 0 5px 5px;
  107 + -moz-box-shadow: #bdc3c7 0 5px 5px;
  108 + box-shadow: #bdc3c7 0 5px 5px;
  109 + -moz-border-radius-bottomleft: 8px;
  110 + -webkit-border-bottom-left-radius: 8px;
  111 + border-bottom-left-radius: 8px;
  112 + -moz-border-radius-bottomright: 8px;
  113 + -webkit-border-bottom-right-radius: 8px;
  114 + border-bottom-right-radius: 8px;
  115 + margin-bottom: 2em; }
  116 + .timeline li {
  117 + padding: 1em 0; }
  118 + .timeline li:nth-child(even) {
  119 + background-color: #d3d7d8; }
47 120
48 -/*========= Subscrib default divide breadcrumb*/  
49 -.divider{  
50 - display: none;  
51 -}  
52 \ No newline at end of file 121 \ No newline at end of file
  122 +.avatar {
  123 + width: 18%;
  124 + display: inline-block;
  125 + vertical-align: top;
  126 + position: relative;
  127 + overflow: hidden;
  128 + margin-left: 2%; }
  129 + .avatar img {
  130 + width: 100%;
  131 + -webkit-border-radius: 50%;
  132 + -moz-border-radius: 50%;
  133 + -ms-border-radius: 50%;
  134 + -o-border-radius: 50%;
  135 + border-radius: 50%;
  136 + border: 5px solid #ecf0f1;
  137 + position: relative; }
  138 +
  139 +
  140 +
  141 +.first {
  142 + width: 560px;
  143 + display: block;
  144 + margin: auto;
  145 + background-color: #3498db;
  146 + text-shadow: #2084c7 1px 1px 0;
  147 + padding: 1em 0 !important;
  148 + color: white;
  149 + text-align: center;
  150 + margin-top: 1em;
  151 + font-family: "Lato";
  152 + font-size: 1.6em;
  153 + -moz-border-radius-topleft: 8px;
  154 + -webkit-border-top-left-radius: 8px;
  155 + border-top-left-radius: 8px;
  156 + -moz-border-radius-topright: 8px;
  157 + -webkit-border-top-right-radius: 8px;
  158 + border-top-right-radius: 8px;
  159 + position: relative; }
  160 +
  161 +
  162 +.over-bubble {
  163 + line-height: 1.4em;
  164 + padding-top: 10%;
  165 + background-color: rgba(236, 240, 241, 0.8);
  166 + position: relative;
  167 + -webkit-border-radius: 8px;
  168 + -moz-border-radius: 8px;
  169 + -ms-border-radius: 8px;
  170 + -o-border-radius: 8px;
  171 + border-radius: 8px;
  172 + text-align: center;
  173 + display: inline-block;
  174 + position: absolute !important;
  175 + height: 100%;
  176 + width: 100%;
  177 + opacity: 0;
  178 + top: 0;
  179 + left: 0;
  180 + z-index: 999;
  181 + -webkit-transition-property: all;
  182 + -moz-transition-property: all;
  183 + -o-transition-property: all;
  184 + transition-property: all;
  185 + -webkit-transition-duration: 0.3s;
  186 + -moz-transition-duration: 0.3s;
  187 + -o-transition-duration: 0.3s;
  188 + transition-duration: 0.3s;
  189 + -webkit-transition-timing-function: ease-in;
  190 + -moz-transition-timing-function: ease-in;
  191 + -o-transition-timing-function: ease-in;
  192 + transition-timing-function: ease-in;
  193 + font-size: 2.8em;
  194 + text-shadow: white 1px 1px 0; }
  195 +
  196 +.action {
  197 + margin-right: .3em;
  198 + -webkit-transition-property: all;
  199 + -moz-transition-property: all;
  200 + -o-transition-property: all;
  201 + transition-property: all;
  202 + -webkit-transition-duration: 0.2s;
  203 + -moz-transition-duration: 0.2s;
  204 + -o-transition-duration: 0.2s;
  205 + transition-duration: 0.2s;
  206 + -webkit-transition-timing-function: ease-in;
  207 + -moz-transition-timing-function: ease-in;
  208 + -o-transition-timing-function: ease-in;
  209 + transition-timing-function: ease-in; }
  210 +
  211 +
  212 +h3 {
  213 + font-size: 1.2em;
  214 + font-weight: bold;
  215 + font-family: 'Lato';
  216 + display: inline-block;
  217 + margin-bottom: .2em;
  218 + color: #95a5a6; }
  219 +
  220 +.retweet {
  221 + position: absolute;
  222 + opacity: 1;
  223 + top: 0;
  224 + right: 1em;
  225 + display: block;
  226 + background-color: #16a085;
  227 + padding: 4px;
  228 + -moz-border-radius-bottomleft: 5px;
  229 + -webkit-border-bottom-left-radius: 5px;
  230 + border-bottom-left-radius: 5px;
  231 + -moz-border-radius-bottomright: 5px;
  232 + -webkit-border-bottom-right-radius: 5px;
  233 + border-bottom-right-radius: 5px; }
  234 + .retweet .icon-retweet {
  235 + color: white;
  236 + margin: auto;
  237 + width: 100%;
  238 + display: block;
  239 + font-size: 1.2em; }
  240 +
  241 +/*CSS NOTIFICACIONS*/
  242 +
  243 +.alert_list{font-size: 11px; color:grey}
  244 +li.alert_li {
  245 + font-size: 11px;
  246 + color:grey;
  247 + padding:10px 0px 2px 0px;
  248 + border-bottom: thin solid #c0c0c0;
  249 +}
  250 +li.alert_li:hover{background-color:#eee}
  251 +.turn_off_alert{float:right;margin-bottom :1px}
  252 +a.alert_message{color : grey}
  253 +a.alert_message:hover{color : grey}
core/static/css/base/header.css
1 -/* Classes */  
2 -  
3 -.header-bg{  
4 - background-color: green;  
5 -}  
6 -  
7 -.header-div{  
8 - margin-top: 1%;  
9 -}  
10 -  
11 -.logo{  
12 - height:100%;  
13 - margin-left: 30%;  
14 -}  
15 -  
16 -.link{  
17 - transition-duration: 0.5s; /*Slow down the transformation*/  
18 -}  
19 -  
20 -.link:hover{  
21 - transform:scale(1.1);  
22 -}  
23 -  
24 -.notifications{  
25 - font-size: 20px;  
26 -  
27 -}  
28 -  
29 -/* ID */  
30 -  
31 - 1 +/* Classes */
  2 +
  3 +.header-bg{
  4 + background-color: green;
  5 +}
  6 +
  7 +.header-div{
  8 + margin-top: 1%;
  9 +}
  10 +
  11 +.logo{
  12 + height:100%;
  13 + margin-left: 30%;
  14 +}
  15 +
  16 +.link{
  17 + transition-duration: 0.5s;
  18 +}
  19 +
  20 +.link:hover{
  21 + transform:scale(1.1);
  22 +}
  23 +
  24 +/* ID */
  25 +
  26 +.notifications{
  27 + font-size: 20px;
  28 +
  29 +}
  30 +
core/templates/base.html
@@ -37,95 +37,110 @@ @@ -37,95 +37,110 @@
37 {% endblock %} 37 {% endblock %}
38 </head> 38 </head>
39 <body> 39 <body>
40 - {% block nav %}  
41 <div class="container-fluid"> 40 <div class="container-fluid">
  41 + {% block nav %}
  42 + <div class="row">
  43 + <div class="container-fluid">
  44 + <div class="row">
  45 + <div class="navbar navbar-default">
  46 + <div class="container-fluid">
  47 + <div class="navbar-header">
  48 + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
  49 + <span class="icon-bar"></span>
  50 + <span class="icon-bar"></span>
  51 + <span class="icon-bar"></span>
  52 + </button>
  53 + <a class="navbar-brand" href="javascript:void(0)"><img class="logo" src="{% static 'img/topo-amadeus.png' %}" alt="Logo"/></a>
  54 + </div>
  55 + <div class="navbar-collapse collapse navbar-responsive-collapse">
  56 + <ul class="nav navbar-nav navbar-right notifications">
  57 + <li class="" data-toggle="tooltip" data-placement="bottom" title data-original-title="notifications">
  58 + <a href="../user/profile_user.html" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bell-o" aria-hidden="true"></i></a>
  59 + <ul class="dropdown-menu">
  60 + <li class="dropdown-header">Notifications</li>
  61 + {% for notification in notifications %}
  62 + {% if notification.actor %} <!-- if the notification has a user-->
  63 + <li>
  64 + <a href="{{ notification.action_resource.resource.link }}"><div class="list-group-item">
  65 + <div class="row-picture">
  66 + <img class="circle" src="http://lorempixel.com/56/56/people/1" alt="icon">
  67 + <div class="least-content pull-right">{{ notification.datetime }}</div>
  68 + </div>
  69 + <div class="row-content">
  70 + <p class="list-group-item-text">{{ notification.message }}</p>
  71 + </div>
  72 + </div>
  73 + </a>
  74 + </li>
  75 + {% else %}
  76 + <li>
  77 + <a href="{{ notification.action_resource.resource.link }}">
  78 + <div class="list-group-item">
  79 + <div class="row-action-primary">
  80 + <i class="material-icons">folder</i>
  81 + </div>
  82 + <div class="row-content">
  83 +
  84 + <div class="least-content pull-right">{{ notification.datetime }}</div>
  85 +
  86 + <p class="list-group-item-text">{{ notification.message }}</p>
  87 + </div>
  88 + </a>
  89 + </li>
  90 + {% endif %}
  91 + {% endfor %}
  92 +
  93 + <div> <p>See more</p> </div>
  94 + </ul>
  95 + </li>
  96 +
  97 + <li class="link" data-toggle="tooltip" data-placement="bottom" title data-original-title="messages"> <a href="#"><i class="fa fa-comments" aria-hidden="true"></i></a> </li>
  98 + <li class="link"> <a href="{% url 'users:profile' %}">{{ user }}</a></li>
  99 + <li class="link"> <a href="{% url 'core:logout' %}">{% trans 'Log out' %}</a></li>
  100 + </ul>
  101 + </div>
  102 + </div>
  103 + </div>
  104 + </div>
  105 + </div>
  106 + </div>
  107 + {% endblock %}
  108 +
42 <div class="row"> 109 <div class="row">
43 - <div class="navbar navbar-default">  
44 - <div class="container-fluid">  
45 - <div class="navbar-header">  
46 - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">  
47 - <span class="icon-bar"></span>  
48 - <span class="icon-bar"></span>  
49 - <span class="icon-bar"></span>  
50 - </button>  
51 - <a class="navbar-brand" href="javascript:void(0)"><img class="logo" src="{% static 'img/topo-amadeus.png' %}" alt="Logo"/></a>  
52 - </div>  
53 - <div class="navbar-collapse collapse navbar-responsive-collapse">  
54 - <ul class="nav navbar-nav navbar-right notifications">  
55 - <li class="" data-toggle="tooltip" data-placement="bottom" title data-original-title="notifications">  
56 - <a href="../user/profile_user.html" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bell-o" aria-hidden="true"></i></a>  
57 - <ul class="dropdown-menu">  
58 - <li class="dropdown-header">Notifications</li>  
59 - {% for notification in notifications %}  
60 - {% if notification.actor %} <!-- if the notification has a user-->  
61 - <li>  
62 - <a href="{{ notification.action_resource.resource.link }}"><div class="list-group-item">  
63 - <div class="row-picture">  
64 - <img class="circle" src="http://lorempixel.com/56/56/people/1" alt="icon">  
65 - <div class="least-content pull-right">{{ notification.datetime }}</div>  
66 - </div>  
67 - <div class="row-content">  
68 - <p class="list-group-item-text">{{ notification.message }}</p>  
69 - </div>  
70 - </div>  
71 - </a>  
72 - </li>  
73 - {% else %}  
74 - <li>  
75 - <a href="{{ notification.action_resource.resource.link }}">  
76 - <div class="list-group-item">  
77 - <div class="row-action-primary">  
78 - <i class="material-icons">folder</i>  
79 - </div>  
80 - <div class="row-content">  
81 -  
82 - <div class="least-content pull-right">{{ notification.datetime }}</div>  
83 -  
84 - <p class="list-group-item-text">{{ notification.message }}</p>  
85 - </div>  
86 - </a>  
87 - </li>  
88 - {% endif %}  
89 - {% endfor %}  
90 -  
91 - <div> <p>See more</p> </div>  
92 - </ul>  
93 - </li>  
94 -  
95 - <li class="link" data-toggle="tooltip" data-placement="bottom" title data-original-title="messages"> <a href="#"><i class="fa fa-comments" aria-hidden="true"></i></a> </li>  
96 - <li class="link"> <a href="{% url 'users:profile' %}">{{ user }}</a></li>  
97 - <li class="link"> <a href="{% url 'core:logout' %}">{% trans 'Log out' %}</a></li>  
98 - </ul>  
99 - </div>  
100 - </div>  
101 - </div>  
102 - </div>  
103 - </div>  
104 - {% endblock %} 110 + <div class="container-fluid">
  111 + <div class="row">
  112 + <div class="col-xs-* col-sm-* col-md-2">
  113 + {% block sidebar %}
105 114
106 - <div class="container-fluid">  
107 - {% block breadcrumbs %} 115 + {% endblock %}
  116 + </div>
108 117
109 - {% endblock %}  
110 -  
111 - {% block render_breadcrumbs %} 118 + <div class="col-xs-* col-sm-* col-md-10">
  119 + {% block breadcrumbs %}
112 120
113 - {% endblock %}  
114 - <div class="row">  
115 - <div class="col-md-3 col-sm-3">  
116 - {% block sidebar %} 121 + {% endblock %}
  122 +
  123 + {% block render_breadcrumbs %}
117 124
118 - {% endblock %}  
119 - </div>  
120 - <div class="col-md-6 col-sm-6">  
121 - {% block content %} 125 + {% endblock %}
122 126
123 - {% endblock %}  
124 - </div>  
125 - <div class="col-md-3 col-sm-3">  
126 - {% block rightbar %} 127 + <div class="row">
  128 + <div class="container-fluid">
  129 + <div class="col-xs-* col-sm-* col-md-8">
  130 + {% block content %}
  131 +
  132 + {% endblock %}
  133 + </div>
  134 +
  135 + <div class="col-xs-* col-sm-* col-md-4">
  136 + {% block rightbar %}
127 137
128 - {% endblock rightbar %} 138 + {% endblock rightbar %}
  139 + </div>
  140 + </div>
  141 + </div>
  142 + </div>
  143 + </div>
129 </div> 144 </div>
130 </div> 145 </div>
131 </div> 146 </div>