Skip to content

Commit 01daed6

Browse files
jkalbhennjkalbhenn
committed
rework css
1 parent 546364a commit 01daed6

File tree

8 files changed

+153
-204
lines changed

8 files changed

+153
-204
lines changed

‎app/views/time_logging_app/index.html.erb

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -16,32 +16,24 @@
1616
<h2><%= t(:menu_entry_title) %></h2>
1717
<div id="form">
1818
<div class="topControls editMode">
19-
<button class="cancel"><%= t(:button_cancel) %></button>
20-
<button class="delete"><%= t(:button_delete) %></button>
19+
<button class="cancel"><%= t(:button_cancel) %></button><button class="delete"><%= t(:button_delete) %></button>
2120
</div>
2221
<div class="row topControls">
2322
<div class="left hbox">
24-
<input id="date" tabindex="1" type="text"/>
25-
<div class="dateControls">
26-
<button class="prev" title="<%= t(:prev_day) %>"></button>
27-
<button class="next" title="<%= t(:next_day) %>"></button>
23+
<input id="date" tabindex="1" type="text"/><div class="dateControls">
24+
<button class="prev" title="<%= t(:prev_day) %>"></button><button class="next" title="<%= t(:next_day) %>"></button>
2825
</div>
2926
</div>
3027
<div class="right hbox">
31-
<button class="start-stop-timer" title="<%= t(:start_stop_timer) %>"></button>
32-
<button class="open-in-redmine" title="<%= t(:open_in_redmine) %>"></button>
33-
<button class="overview"
28+
<button class="start-stop-timer" title="<%= t(:start_stop_timer) %>"></button><button class="open-in-redmine" title="<%= t(:open_in_redmine) %>"></button><button class="overview"
3429
data-href="<%= url_for({controller: "time_logging_app", action: "overview", html_options: {target: "_blank", class: "overview"}}) %>"
35-
title="<%= t(:label_overview) %>">
36-
</button>
37-
<button class="resetForm" title="<%= t(:button_reset) %>"></button>
30+
title="<%= t(:label_overview) %>"></button><button class="resetForm" title="<%= t(:button_reset) %>"></button>
3831
</div>
3932
</div>
4033
<textarea accesskey="f" id="search" tabindex="2" placeholder="<%= t(:label_search)%>"></textarea>
4134
<div class="hbox">
4235
<div id="time">
43-
<input id="hours" tabindex="3" type="number" placeholder="<%= t(:field_hours)%>"/>
44-
<input id="minutes" tabindex="4" type="number" placeholder="<%= t(:field_minutes)%>"/>
36+
<input id="hours" tabindex="3" type="number" placeholder="<%= t(:field_hours)%>"/><input id="minutes" tabindex="4" type="number" placeholder="<%= t(:field_minutes)%>"/>
4537
</div>
4638
<select id="activity" tabindex="5" placeholder="<%= t(:field_activity) %>" title="<%= t(:field_activity) %>"></select>
4739
</div>
@@ -71,11 +63,6 @@
7163
</tr>
7264
</thead>
7365
<tbody></tbody>
74-
<tfoot>
75-
<tr>
76-
<td class="hoursTotal" colspan="4"></td>
77-
</tr>
78-
</tfoot>
7966
</table>
8067
</div>
8168
<script id="timeEntryTemplate" type="text/html">
@@ -92,8 +79,7 @@
9279
<a class="activity" href="{{timeEntriesUrl}}" target="_blank">{{activity}}</a>
9380
</td>
9481
<td>
95-
<button class="insert"></button>
96-
<button class="edit"></button>
82+
<button class="insert"></button><button class="edit"></button>
9783
</td>
9884
</tr>
9985
</script>

‎assets/images/jquery-ui/ui-icons_c98000_256x240.png

2.43 KB
Loading

‎assets/images/jquery-ui/ui-icons_f29a00_256x240.png

2.4 KB
Loading

‎assets/stylesheets/main.css

Lines changed: 69 additions & 90 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎exe/compile-watch

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
#!/bin/sh
2+
3+
while true
4+
do
5+
inotifywait --event modify --recursive --quiet src && ./exe/compile
6+
done

‎exe/symlink-assets

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@
33
# this script is for plugin development.
44
# when assets are symlinked the server does not have to be restarted with each change.
55

6-
redmine_root=$1
7-
cp -rsft "$redmine_root/public/plugin_assets/redmine_time_logging_app" assets/*
6+
redmine_root="$1"
7+
cp -rsft "$redmine_root/public/plugin_assets/redmine_time_logging_app" "$PWD/assets"/*

‎src/css/jquery-ui.override.css

Lines changed: 13 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,13 @@
1-
.ui-button-text-only .ui-button-text {
2-
padding: 0;
3-
}
4-
.ui-button-text-icon-primary .ui-button-icon-primary {
5-
left: 0.9em;
6-
}
7-
button .ui-button-icon {
8-
margin-left: -1px;
9-
}
10-
.ui-autocomplete {
11-
max-height: 40%;
12-
overflow: scroll;
13-
overflow-x: hidden;
14-
}
15-
.ui-button {
16-
margin-right: 0;
17-
}
18-
.ui-autocomplete .closed {
19-
/* strike through text for closed issues in the autocomplete */
20-
text-decoration: line-through;
21-
}
22-
.ui-dialog .ui-dialog-buttonpane button {
23-
padding-left: 1rem;
24-
padding-right: 1rem;
25-
}
26-
.ui-menu .ui-menu-item {
27-
padding: 6px 1em 6px .4em;
28-
}
29-
.ui-menu .ui-menu-item:hover,
30-
.ui-menu .ui-menu-item:focus,
31-
.ui-menu .ui-state-active
32-
{
33-
background: #ddd;
34-
color: #333;
35-
border: 0;
36-
text-decoration: inherit;
37-
}
1+
.ui-button-text-only .ui-button-text{padding:0}
2+
.ui-button-text-icon-primary .ui-button-icon-primary{left:.9em}
3+
button .ui-button-icon{margin-left:-1px}
4+
.ui-autocomplete{max-height:40%;overflow:scroll;overflow-x:hidden}
5+
.ui-button{margin-right:0}
6+
.ui-autocomplete .closed{text-decoration:line-through}
7+
.ui-dialog .ui-dialog-buttonpane button{padding-left:1rem;padding-right:1rem}
8+
.ui-menu .ui-menu-item{padding:6px 1em 6px .4em}
9+
.ui-menu .ui-menu-item:hover,.ui-menu .ui-menu-item:focus,.ui-menu .ui-state-active{background:#ddd;color:#333;border:0;text-decoration:inherit}
10+
.ui-corner-all{border-radius:3px}
11+
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus{border:0}
12+
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{border:0}
13+
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover{border:0;background:#ddd url("../images/jquery-ui/ui-bg_highlight-soft_60_dddddd_1x100.png") 50% 50% repeat-x}

‎src/css/main.css

100755100644
Lines changed: 56 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,84 @@
11
*{box-sizing:border-box}
22
html{font-size:13px}
3-
body{background-color:#aaa;min-width:200px;font-size:13px}
4-
#wrapper{background-color:#222;margin:auto;max-width:810px;padding:.25rem}
5-
h2{color:#eaeaea;font-size:20px;text-align:center;margin-bottom:-25px}
6-
#timeEntries td:last-child,#timeEntries th:last-child{text-align:right;width:101px}
3+
body{background-color:#767676;min-width:200px;font-size:13px}
4+
#wrapper{margin:auto;max-width:810px}
5+
#form{padding:2px;background-color:#222}
6+
h2{color:#efefef;font-size:20px;text-align:center;margin-bottom:-24px}
7+
#timeEntries td:last-child,#timeEntries th:last-child{text-align:right;width:106px}
78
th{text-align:left}
89
button{cursor:pointer}
9-
#date{width:13ch;vertical-align:top}
10+
#date{vertical-align:top;border:0}
1011
#activity{float:right;width:79%}
1112
#entriestoday{background-color:#fff;display:none;margin-top:20px;text-align:left;width:100%}
12-
#hours,#minutes{width:9.99%}
13+
#hours,#minutes{width:80px}
1314
#time{display:inline}
1415
#loading{color:#fff;display:none;font-weight:700;text-align:center}
15-
#loading .icon{background-color:url(../../images/app/loading.gif);display:inline-block;height:16px;margin-bottom:-3px;width:16px}
16-
.dateControls > *{color:#fff;margin:0;width:45px}
17-
#form > :first-child ~ *{margin-top:3px}
18-
#wrapper > :first-child ~ *{margin-top:4px}
19-
.statusbar{background-color:#507AAA;border-radius:5px;bottom:0;padding:4px;position:relative;right:0}
20-
input,select,textarea,button{background-color:#fff;color:#232323;font-size:13px;border:1px inset #555}
21-
input,select,textarea{padding:5px;padding-right:0}
22-
body,input,textarea,select{-khtml-border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;font-family:arial,helvetica,sans-serif}
23-
input,button,textarea,select{height:44px}
24-
#comments{height:65px}
25-
input:focus,textarea:focus,select:focus{opacity:1;background-color:#eee}
26-
input:hover,textarea:hover,select:hover{opacity:.96}
27-
select{cursor:pointer;padding-bottom:11px;padding-top:11px}
16+
#loading .icon{background-color:url(../../images/app/loading.gif);display:inline-block;height:16px;margin-bottom:-4px;width:16px}
17+
.dateControls>*{color:#fff;width:46px}
18+
.dateControls{margin-left:4px}
19+
#form>:first-child~*{margin-top:2px}
20+
#wrapper>:first-child~*{margin-top:4px}
21+
.statusbar{background-color:#226fa1;border-radius:3px;bottom:0;padding:4px;position:relative;right:0}
22+
button,input,select,textarea{background-color:#fff;color:#222;font-size:13px;border:1px solid #626262}
23+
input,select,textarea{padding:4px}
24+
body,input,select,textarea{border-radius:3px;font-family:arial,helvetica,sans-serif}
25+
button,input,select,textarea{height:46px}
26+
#comments{height:66px}
27+
input:focus,select:focus,textarea:focus{opacity:1;background-color:#efefef}
28+
input:hover,select:hover,textarea:hover{opacity:.96}
29+
select{cursor:pointer}
2830
textarea{resize:none;width:100%;margin-bottom:0}
29-
.error,.error:focus{border:2px solid red}
31+
.error,.error:focus{border:2px solid #df182c}
3032
.editMode.topControls{width:100%}
31-
.editMode.topControls > *{text-align:center;width:49.7%}
32-
.hoursTotal{background-color:#fff}
33+
.editMode.topControls>*{text-align:center;width:49.7%}
3334
button.submit:not(.update){margin-left:0;width:100%}
3435
button.cancel{width:49.7%}
35-
.hbox > *{display:inline-block}
36+
.hbox>*{display:inline-block}
37+
.topControls > *{display:inline-block}
38+
.right{float:right}
3639
table thead{color:#222}
37-
table.list{background-color:#fff;border:1px solid #E4E4E4;border-collapse:collapse;margin-bottom:4px;width:100%}
38-
table.list th{background-color:#EEE;padding:2px;padding-top:4px;padding-bottom:4px;white-space:nowrap}
40+
table.list{background-color:#fff;border:1px solid #e1e1e1;border-collapse:collapse;margin-bottom:4px;width:100%}
41+
table.list th{background-color:#efefef;padding:4px;white-space:nowrap}
3942
table.list td{vertical-align:top}
40-
a,a:link,a:visited{color:#2A5685;text-decoration:none}
41-
table td{padding:2px}
42-
.odd{background-color:#F6F7F8}
43-
.even{background-color:#FFF}
44-
a:hover,a:active{color:#C61A1A;text-decoration:underline}
45-
#notification_area .notification{background-color:rgba(80,122,170,0.9);border-radius:10px;color:#fff;padding:1rem}
46-
.editMode.topControls > :last-child{float:right}
47-
#wrapper.editMode h2,button.delete,button.duplicate,button.cancel,#timeEntries,#form,.ui-datepicker-week-end{display:none}
48-
@media screen and (-webkit-min-device-pixel-ratio:0) {
43+
a,a:link,a:visited{color:#226fa1;text-decoration:none}
44+
table td{padding:8px 4px}
45+
.odd{background-color:#f5f5f5}
46+
.even{background-color:#fff}
47+
a:active,a:hover{color:#df182c;text-decoration:underline}
48+
#notification_area .notification{background-color:#226fa1;border-radius:3px;color:#fff;padding:4px}
49+
.editMode.topControls>:last-child{float:right}
50+
#form,#timeEntries,#wrapper.editMode h2,.ui-datepicker-week-end,button.cancel,button.delete,button.duplicate{display:none}
51+
@media screen and (-webkit-min-device-pixel-ratio:0){
4952
#activity{width:78%}
5053
}
51-
[disabled]{cursor:crosshair;opacity:.9;color:#aaa}
52-
#timeEntries .comments{color:#888;margin-top:2px;padding-left:4px;font-size:9pt;max-width:525px;overflow:hidden;text-overflow:ellipsis}
53-
button.submit{border-color:#999;font-size:110%;width:100%}
54-
button.submit:hover{border-color:#59b4d4}
55-
.dateControls + a{background-color:#fff;padding:4px;float:right;margin-top:4px}
54+
[disabled]{cursor:crosshair;opacity:.9;color:#9f9f9f}
55+
#timeEntries .comments{color:#767676;margin-top:0;padding-left:4px;font-size:9pt;max-width:525px;overflow:hidden;text-overflow:ellipsis}
56+
button.submit{border-color:#9f9f9f;font-size:110%;width:100%}
57+
button.submit:hover{border-color:#9f9f9f}
58+
.dateControls+a{background-color:#fff;padding:4px;float:right;margin-top:4px}
5659
#timeEntries .active{opacity:.5}
57-
#comments{padding-top:12px}
58-
.left{float:left}
59-
.right{float:right}
60-
a.overview{background-color:#fff;padding:2px}
61-
.topControls button,.timeEntry button{width:44px}
60+
a.overview{background-color:#fff;padding:0}
61+
.timeEntry button,.topControls button{width:46px}
62+
.topControls button + button,.timeEntry button + button{margin-left:4px}
63+
#time > input + input{margin-left:2px}
6264
#timeEntries .timeEntry.unavailable-project button{visibility:hidden}
6365
#timeEntries .timeEntry.unavailable-project .title{font-style:italic}
64-
#search:focus::placeholder,#hours:focus::placeholder,#minutes:focus::placeholder,#comments:focus::placeholder,select:focus::placeholder{color:transparent}
66+
#comments:focus::placeholder,#hours:focus::placeholder,#minutes:focus::placeholder,#search:focus::placeholder,select:focus::placeholder{color:#fff}
6567
#timeEntries .overbooked .estimates{font-weight:700}
66-
input[type="number"]{-moz-appearance:textfield}
68+
input[type=number]{-moz-appearance:textfield}
6769
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
68-
@media screen and (max-width: 740px) {
69-
#activity{width:100%;margin-left:0;float:none;margin-top:3px}
70-
#hours,#minutes{text-align:center;width:48%}
70+
@media screen and (max-width:740px){
71+
#activity{width:100%;margin-left:0;float:none;margin-top:2px}
72+
#hours,#minutes{text-align:center;width:49%}
7173
#minutes{float:right}
7274
#time{display:block}
7375
}
74-
@media screen {
76+
@media screen{
7577
#wrapper{min-width:200px}
7678
}
77-
@media screen and (max-width: 530px) {
79+
@media screen and (max-width:530px){
7880
h2{display:none!important}
7981
}
80-
@media screen and (max-width: 342px) {
81-
.topControls > *{float:none;display:inline-block}
82-
}
82+
@media screen and (max-width:342px){
83+
.topControls>*{float:none;display:inline-block}
84+
}

0 commit comments

Comments
 (0)