Download as
Browse Code »

Commit 7d5faa4322608a7d3a3b75aa5843bb396a34f8cb

Authored by Zambom
1 parent 3652ee1c
Exists in master and in 5 other branches amadeus_univasf, dev, image-crop, pdf_file_html, refactoring

Changing base to new patterns [Issue: #45]

Showing 5 changed files with 339 additions and 192 deletions   Show diff stats
app/templates/home.html 0 → 100644
  Diff comments   View file @7d5faa4
... ... @@ -0,0 +1 @@
  1 +{% load static i18n %}
0 2 \ No newline at end of file
... ...
app/templates/home_app.html
View file @3652ee1
... ... @@ -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
  Diff comments   View file @7d5faa4
  1 +.logoLogin{
  2 + padding-bottom: 1%;
  3 + width: 15%;
  4 +}
1 5 .navigation{
2 6 margin: 10% 10% 5% 5%;
3 7 }
... ... @@ -30,22 +34,219 @@
30 34 padding-bottom: 200px;
31 35 }
32 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 46 h5{
39 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 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
  Diff comments   View file @7d5faa4
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
  Diff comments   View file @7d5faa4
... ... @@ -37,95 +37,110 @@
37 37 {% endblock %}
38 38 </head>
39 39 <body>
40   - {% block nav %}
41 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 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 144 </div>
130 145 </div>
131 146 </div>
... ...