Refine map UI for small screens
[rails.git] / app / assets / stylesheets / small.css.scss
1 /* Styles specific to a small screen, such as iPhone, Android, etc... */
2
3 /* Default rules for the body of every page */
4
5 body {
6   font-size: 10px;
7 }
8
9 h1 {
10   font-size: 12px;
11 }
12
13 h2, h3, h4 {
14   font-size: 12px;
15 }
16
17 .wrapper {
18   margin: 0;
19 }
20
21 .site-edit #content,
22 .site-index #content,
23 .site-export #content {
24   left: 0;
25 }
26
27 .site-edit #top-bar,
28 .site-index #top-bar,
29 .site-export #top-bar {
30   position: relative;
31 }
32
33 .site-edit #content, .site-index #content, .site-export #content {
34   position: absolute;
35 }
36
37 .column-1 {
38   width: 100%;
39 }
40
41 /* Rules for the whole left sidebar, including the logo */
42
43 #left {
44   display: none;
45 }
46
47 /* Rules for tabbed navigation bar */
48
49 #top-bar {
50   left: 0;
51   margin: 0px;
52   height: 24px;
53   position: static;
54 }
55
56 #tabnav {
57   height: 19px;
58   margin: 0px;
59   padding-top: 5px;
60   margin-top: 26px;
61   font-size: 10px;
62   line-height: 10px;
63 }
64
65 #tabnav a, #tabnav a:link, #tabnav a:visited {
66   font-size: 10px;
67   line-height: 10px;
68   padding: 5px;
69   margin-right: 1px;
70 }
71
72 .menuicon { line-height: 10px;}
73
74 /* Rules for the site name - shown when left sidebar is hidden */
75
76 #small-title {
77   font-size: 12px;
78   line-height: 14px;
79   height: 16px;
80   display: block;
81   position: absolute;
82   left: 5px;
83   top: 5px;
84   padding: 2px;
85   width: 110px;
86   background-color: #fff;
87   z-index: 100;
88 }
89
90 #small-title img {
91   position: absolute;
92 }
93
94 #small-title h1 {
95   position: absolute;
96   font-size: 10px;
97   line-height: 18px;
98   margin: 0;
99   left: 22px;
100 }
101
102 /* Rules for greeting bar in the top right corner */
103
104 #greeting {
105   position: absolute;
106   right: 0;
107   top: 0;
108   background: none;
109 }
110
111 #browse_map ul.secondary-actions {
112   float: right;
113   font-size: 10px;
114 }
115
116 #map {
117   border: 0;
118 }
119
120 .content_map {
121   width: 100%;
122   border: none;
123   float: none;
124   height: 200px;
125   max-height: none;
126   min-height: auto;
127 }
128
129 .content_map #small_map {
130   height: 300px;
131   border: 1px solid #ccc;
132 }
133
134 .leaflet-control-pan, .leaflet-control-zoomslider {
135   display: none;
136 }
137
138 .site-index .leaflet-top,
139 .site-export .leaflet-top {
140   top: 10px !important;
141 }
142
143 /* Rules for the main content area */
144
145 #content {
146   margin-left: 0px;
147   margin-right: 0px;
148   border-left: 0px;
149   border-right: 0px;
150 }
151
152 .site-export #content,
153 .site-edit #content,
154 .site-index #content {
155   margin-top: 21px;
156 }
157
158 /* Rules for search sidebar when shown */
159
160 #sidebar {
161   border: 0px;
162   margin: 0px;
163   width: 50% !important;
164   border-right: 1px solid #ccccdd;
165 }
166
167 p.search_results_entry {
168   padding: 2px 0px;
169 }
170
171 /* Rules for the map UI */
172
173 .layers-ui {
174   .leaflet-container {
175     display: none;
176   }
177
178   li {
179     border-radius: 0;
180     margin-bottom: 0;
181
182     &:first-child {
183       border-radius: 4px 4px 0 0;
184     }
185
186     &:last-child {
187       border-radius: 0 0 4px 4px;
188     }
189   }
190 }
191
192 /* Rules for the signup form */
193
194 #signupForm input[type="text"], #signupForm input[type="password"] {
195   width: 100%;
196 }
197
198 #signupForm input#user_email {
199   max-width: 30em;
200 }
201
202 #signupForm input#user_email_confirmation {
203   max-width: 30em;
204 }
205
206 #signupForm input#user_display_name {
207   max-width: 20em;
208 }
209
210 #signupForm input#user_pass_crypt {
211   max-width: 20em;
212 }
213
214 #signupForm input#user_pass_crypt_confirmation {
215   max-width: 20em;
216 }
217
218 /* Rules for the login form */
219
220 #login_login input#user_email {
221   width: 100%;
222   max-width: 18em;
223 }
224
225 #login_login input#user_password {
226   width: 100%;
227   max-width: 18em;
228 }
229
230 #login_login input#openid_url {
231   width: 100%;
232   max-width: 18em;
233 }
234
235 #login_openid_buttons td {
236   padding: 2px;
237 }
238
239 /* Rules for the user view */
240
241 .user_map {
242   width: 100% !important;
243   height: 300px !important;
244 }
245
246 #userinformation .deemphasize {
247   position: relative;
248   right: auto; left: auto;
249   margin-top: 10px;
250   top: auto;
251 }
252
253 /* Rules for the user settings page */
254
255 #user_new_email {
256   width: 60% !important;
257 }
258
259 #user_description, #user_preferred_editor {
260   width: 90% !important;
261 }
262
263 .minorNote {
264   display: block;
265 }
266
267 /* Rules for the browse pages */
268
269 .browse-section.common div{
270   clear: both;
271 }
272
273 #changeset_list_map {
274   position: relative;
275   width: 100%;
276   right: 0;
277   left: 0;
278   top: 0px;
279   margin-bottom: 20px;
280   float: none;
281   height: 300px !important;
282   max-height: auto;
283   min-height: auto;
284 }
285
286 /* Rules for the diary entries pages */
287
288 #diary_entry_title, #diary_entry_body, #diary_entry_language_code, #diary_comment_body {
289   width: 100% !important;
290 }
291
292 #usemap {
293   display: block;
294 }
295
296 /* Rules for the messaging pages */
297
298 #message_title, #message_body {
299   width: 100% !important;
300 }