Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

last changes #4

Merged
merged 5 commits into from over 2 years ago

2 participants

Ida Swarczewskaja Tristan Sloughter
Ida Swarczewskaja

Tristan, I've done some small design fixes for OpaDo today, would you pull them and update opado.org please?

Tristan Sloughter tsloughter merged commit 83a0435 into from
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 5 unique commits by 1 author.

Jan 23, 2012
Ida Swarczewskaja [img] replaced fb connect d155460
Ida Swarczewskaja [html] todo list input width a199853
Ida Swarczewskaja [html] facebook connect positioning 8d8060f
Ida Swarczewskaja [css] todo list input width 97fe7b2
Ida Swarczewskaja [css] cleanup: remove mobile and tablet css files c81a7f5
This page is out of date. Refresh to see the latest.
BIN  resources/fb_connect.png
BIN  resources/fbconnect.png
40 resources/mobile.css
... ... @@ -1,40 +0,0 @@
1   -/**
2   - * @author Ida Swarczewskaja (CSS & design)
3   - */
4   -
5   -/** Mobile Portrait: width 320px **/
6   -
7   -@media only screen and (max-width: 767px) {
8   - .topbar {}
9   - .hero-unit {}
10   - .container, .container-fluid, .modal, .footer { width: 300px; }
11   - .container {margin-bottom:10px;}
12   -
13   - /* Columns */
14   - .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12, .span12, .span13, .span14, .span15,
15   - .span16, .span17, .span18, .span19, .span20, .span21, .span22, .span23, .span24, .span-one-third, .span-two-thirds { width: 300px; }
16   -
17   - /* Offsets */
18   - .row > .offset1, .row > .offset2, .row > .offset3, .row > .offset4, .row > .offset5, .row > .offset6, .row > .offset7, .row > .offset8,
19   - .row > .offset9, .row > .offset10, .row > .offset11, .row > .offset12, .row > .offset-one-third, .row > .offset-two-thirds { margin-left: 0; }
20   -
21   - .content form, .content h1 {margin-left:0px;}
22   -
23   - input.xlarge, #login_box input {width:265px;}
24   - .btn.large, button[type="submit"] {width:277px;font-size:18px;}
25   - input#new_todo{width:285px;}
26   - ul#todo_list .icon.icon-remove {display:inline-block;}
27   - ul#todo_list input[type="checkbox"]{margin-right:6px;}
28   -}
29   -
30   -/** Mobile Landscape: width 480px **/
31   -
32   -@media only screen and (min-width: 480px) and (max-width: 767px) {
33   - .container, .container-fluid, .modal, .footer { width: 420px; }
34   - .container {margin-bottom:10px;}
35   -
36   - /* Columns */
37   - .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12, .span12, .span13, .span14, .span15, .span16, .span17, .span18, .span19, .span20, .span21, .span22, .span23, .span24, .span-one-third, .span-two-thirds{ width: 420px; }
38   -
39   - .content form, .content h1 {margin-left:0px;}
40   -}
20 resources/style.css
@@ -135,7 +135,7 @@ ul#todo_list li:first-child {border-top:none;}
135 135 ul#todo_list li:hover {background-color:rgba(0,0,0,0.05);}
136 136 ul#todo_list input[type="checkbox"]{
137 137 float:left;
138   - margin:4px 15px;
  138 + margin:4px 10px 4px 0;
139 139 position:relative;
140 140 display:inline-block;
141 141 }
@@ -148,7 +148,7 @@ ul#todo_list .icon.icon-remove {
148 148
149 149 ul#todo_list .display:hover .icon.icon-remove {display:inline-block;}
150 150
151   -.todo_content {padding:0 5px;font-size:18px; line-height:22px;color:#6C6B66;}
  151 +.todo_content {padding:0 3px;font-size:18px; line-height:22px;color:#6C6B66;}
152 152
153 153 /* Edit input */
154 154 #todo_list .editing .display, #todo_list .edit {display: none;}
@@ -167,6 +167,7 @@ ul#todo_list .display:hover .icon.icon-remove {display:inline-block;}
167 167 -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 1px 1px rgba(0, 0, 0, 0.05);
168 168 box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 1px 1px rgba(0, 0, 0, 0.05);
169 169 }
  170 +
170 171 #todo_stats .todo_count {margin:5px 0;}
171 172 .bold {font-weight:bold;}
172 173
@@ -190,25 +191,26 @@ ul#todo_list .display:hover .icon.icon-remove {display:inline-block;}
190 191
191 192 @media only screen and (max-width: 480px) {
192 193 body {min-height:auto;width:100%;height:100%;}
193   - .container, .container-fluid, .footer { width: 300px; }
  194 + .container, .container-fluid, .footer { width: 300px;}
  195 + .content {text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);}
194 196
195 197 /* Columns */
196 198 .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10,
197 199 .span11, .span12, .span12, .span13, .span14, .span15, .span16, .span17, .span18,
198   - .span19, .span20, .span21, .span22, .span23, .span24, .span-one-third, .span-two-thirds { width: 300px; }
  200 + .span19, .span20, .span21, .span22, .span23, .span24, .span-one-third, .span-two-thirds {width: 300px;}
199 201
200 202 /* Offsets */
201 203 .row > .offset1, .row > .offset2, .row > .offset3, .row > .offset4, .row > .offset5,
202 204 .row > .offset6, .row > .offset7, .row > .offset8, .row > .offset9, .row > .offset10,
203   - .row > .offset11, .row > .offset12, .row > .offset-one-third, .row > .offset-two-thirds { margin-left: 0; }
  205 + .row > .offset11, .row > .offset12, .row > .offset-one-third, .row > .offset-two-thirds {margin-left: 0;}
204 206
205 207 /* Inputs width */
206 208 input.xlarge, #login_box input {width:265px;}
207 209 .btn.large {width:277px;font-size:18px;}
208 210 input#new_todo{width:285px;}
  211 + ul#todo_list input.xlarge {width:210px;}
209 212
210 213 /* Todo list */
211   - ul#todo_list .icon.icon-remove {display:inline-block;}
212 214 ul#todo_list input[type="checkbox"]{font-size:20px;margin: 3px 6px 0 0;-webkit-appearance:checkbox;}
213 215 .well .btn {padding:5px 8px 6px 8px;}
214 216 }
@@ -219,18 +221,20 @@ ul#todo_list .display:hover .icon.icon-remove {display:inline-block;}
219 221 html {height:100%;}
220 222 body {min-height:auto;width:100%;height:100%;}
221 223
222   - .container, .container-fluid, .footer { width: 460px;}
  224 + .container, .container-fluid, .footer {width: 460px;}
  225 + ul#todo_list input.xlarge {width:265px;}
223 226
224 227 /* Columns */
225 228 .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10,
226 229 .span11, .span12, .span12, .span13, .span14, .span15, .span16, .span17, .span18,
227   - .span19, .span20, .span21, .span22, .span23, .span24, .span-one-third, .span-two-thirds{ width: 460px; }
  230 + .span19, .span20, .span21, .span22, .span23, .span24, .span-one-third, .span-two-thirds{width: 460px;}
228 231 }
229 232
230 233 /** Tablet **/
231 234 @media only screen and (min-width: 768px) and (max-width: 959px) {
232 235 html {height:100%;}
233 236 body {width:100%;height:100%;}
  237 + .content {text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);}
234 238
235 239 /* Todo list */
236 240 ul#todo_list input[type="checkbox"]{font-size:20px;margin: 3px 6px 0 0;-webkit-appearance:checkbox;}
42 resources/tablet.css
... ... @@ -1,42 +0,0 @@
1   -/** Tablet Portrait: width of 768px **/
2   -
3   -@media only screen and (min-width: 768px) and (max-width: 959px) {
4   - .container, .container-fluid { width: 768px; }
5   -
6   - /* Columns */
7   - .span1 { width: 28px; }
8   - .span2 { width: 76px; }
9   - .span3{ width: 124px; }
10   - .span4 { width: 172px; }
11   - .span5 { width: 220px; }
12   - .span6 { width: 268px; }
13   - .span7 { width: 316px; }
14   - .span8 { width: 364px; }
15   - .span9 { width: 412px; }
16   - .span10 { width: 460px; }
17   - .span11 { width: 508px; }
18   - .span12 { width: 556px; }
19   - .span13 { width: 604px; }
20   - .span14 { width: 652px; }
21   - .span15 { width: 700px; }
22   - .span16, .span17, .span18, .span19, .span20, .span21, .span22, .span23, .span24 { width: 748px; }
23   -
24   - .span-one-third { width: 236px; }
25   - .span-two-thirds { width: 492px; }
26   -
27   - /* Offsets */
28   - .row > .offset1 { margin-left: 48px; }
29   - .row > .offset2 { margin-left: 96px; }
30   - .row > .offset3 { margin-left: 144px; }
31   - .row > .offset4 { margin-left: 192px; }
32   - .row > .offset5 { margin-left: 240px; }
33   - .row > .offset6 { margin-left: 288px; }
34   - .row > .offset7 { margin-left: 336px; }
35   - .row > .offset8 { margin-left: 348px; }
36   - .row > .offset9 { margin-left: 432px; }
37   - .row > .offset10 { margin-left: 480px; }
38   - .row > .offset11 { margin-left: 528px; }
39   - .row > .offset12 { margin-left: 576px; }
40   - .row > .offset-one-third { margin-left: 236px;}
41   - .row > .offset-two-thirds {margin-left: 492px;}
42   -}
2  src/todo.opa
@@ -88,7 +88,7 @@ module Todo {
88 88 }
89 89
90 90 function make_editable(string id, string value) {
91   - line = <input id={id^"_input"} class="todo_content" onnewline={function(_){update_todo(id, Dom.get_value(#{id^"_input"}))}} value={ value } />
  91 + line = <input id={id^"_input"} class="xlarge todo_content" onnewline={function(_){update_todo(id, Dom.get_value(#{id^"_input"}))}} value={ value } />
92 92 Dom.show(#{id^"_destroy"});
93 93 _ = Dom.put_replace(#{id^"_todo"}, Dom.of_xhtml(line));
94 94 update_counts()
12 src/user.opa
@@ -156,9 +156,9 @@ module User {
156 156 <div class="content">
157 157 <h1>Login</h1>
158 158 {loginbox()}
159   - <div class="well">No account?
160   - <a href="/user/new"><strong>Sign Up</strong></a> or
161   - <a href="{login_url}"><img src="/resources/fb_connect.png" /></a>
  159 + <div class="well">
  160 + <p class="pull-left">No account? <a href="/user/new"><strong>Sign Up</strong></a></p>
  161 + <a class="pull-right" href="{login_url}"><img src="/resources/fbconnect.png" /></a>
162 162 </div>
163 163 </div>
164 164 {footer()}
@@ -195,8 +195,10 @@ module User {
195 195 login(Dom.get_value(#username), Dom.get_value(#password))
196 196 }}>Create</button>
197 197 </form>
198   - <div class="well">Already user? <a href="/login"><strong>Login here</strong></a> or
199   - <a href="{login_url}"><img src="/resources/fb_connect.png" /></a></div>
  198 + <div class="well">
  199 + <p class="pull-left">Already user? <a href="/login"><strong>Login here</strong></a></p>
  200 + <a class="pull-right" href="{login_url}"><img src="/resources/fbconnect.png" /></a>
  201 + </div>
200 202 </div>
201 203 {footer()}
202 204 </>

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.