From 0596679c90637befe2c7b95115a25aa70b4f3678 Mon Sep 17 00:00:00 2001 From: Jef van Schendel Date: Sun, 18 Dec 2011 01:04:41 +0100 Subject: [PATCH 01/10] First test lines for responsive design --- mediagoblin/static/css/base.css | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css index 2a78006d..805f0e29 100644 --- a/mediagoblin/static/css/base.css +++ b/mediagoblin/static/css/base.css @@ -389,3 +389,20 @@ table.media_panel th { margin-top: 10px; margin-left: 10px; } + +@media screen and (max-width: 480px) { + .navigation_button { + position: fixed; + bottom: 0px; + right: 0px; + width: 50%; + margin: 0; + } + .navigation_left { + left: 0px; + width: 50%; + } + .media_image { + width: 480px; + } +} From 436b13bb3e2253dc4361333d1260550d343ccfe2 Mon Sep 17 00:00:00 2001 From: Jef van Schendel Date: Sun, 18 Dec 2011 01:31:06 +0100 Subject: [PATCH 02/10] Remove 960.gs stylesheets, add Eric Meyer's reset.css --- extlib/960.gs/960_16_col.css | 447 ------------------- extlib/960.gs/MIT.txt | 20 - extlib/960.gs/README.txt | 54 --- extlib/960.gs/reset.css | 202 --------- extlib/960.gs/text.css | 86 ---- mediagoblin/static/css/extlib/960_16_col.css | 1 - mediagoblin/static/css/extlib/reset.css | 1 - mediagoblin/static/css/extlib/text.css | 1 - mediagoblin/static/css/reset.css | 49 ++ mediagoblin/templates/mediagoblin/base.html | 6 +- 10 files changed, 50 insertions(+), 817 deletions(-) delete mode 100644 extlib/960.gs/960_16_col.css delete mode 100644 extlib/960.gs/MIT.txt delete mode 100755 extlib/960.gs/README.txt delete mode 100644 extlib/960.gs/reset.css delete mode 100644 extlib/960.gs/text.css delete mode 120000 mediagoblin/static/css/extlib/960_16_col.css delete mode 120000 mediagoblin/static/css/extlib/reset.css delete mode 120000 mediagoblin/static/css/extlib/text.css create mode 100644 mediagoblin/static/css/reset.css diff --git a/extlib/960.gs/960_16_col.css b/extlib/960.gs/960_16_col.css deleted file mode 100644 index faa6d8b2..00000000 --- a/extlib/960.gs/960_16_col.css +++ /dev/null @@ -1,447 +0,0 @@ -/* - 960 Grid System ~ Core CSS. - Learn more ~ http://960.gs/ - - Licensed under GPL and MIT. -*/ - -/* - Forces backgrounds to span full width, - even if there is horizontal scrolling. - Increase this if your layout is wider. - - Note: IE6 works fine without this fix. -*/ - -body { - min-width: 960px; -} - -/* Container -----------------------------------------------------------------------------------------------------*/ - -.container_16 { - margin-left: auto; - margin-right: auto; - width: 960px; -} - -/* Grid >> Global -----------------------------------------------------------------------------------------------------*/ - -.grid_1, -.grid_2, -.grid_3, -.grid_4, -.grid_5, -.grid_6, -.grid_7, -.grid_8, -.grid_9, -.grid_10, -.grid_11, -.grid_12, -.grid_13, -.grid_14, -.grid_15, -.grid_16 { - display: inline; - float: left; - position: relative; - margin-left: 10px; - margin-right: 10px; -} - -.push_1, .pull_1, -.push_2, .pull_2, -.push_3, .pull_3, -.push_4, .pull_4, -.push_5, .pull_5, -.push_6, .pull_6, -.push_7, .pull_7, -.push_8, .pull_8, -.push_9, .pull_9, -.push_10, .pull_10, -.push_11, .pull_11, -.push_12, .pull_12, -.push_13, .pull_13, -.push_14, .pull_14, -.push_15, .pull_15, -.push_16, .pull_16 { - position: relative; -} - -/* Grid >> Children (Alpha ~ First, Omega ~ Last) -----------------------------------------------------------------------------------------------------*/ - -.alpha { - margin-left: 0; -} - -.omega { - margin-right: 0; -} - -/* Grid >> 16 Columns -----------------------------------------------------------------------------------------------------*/ - -.container_16 .grid_1 { - width: 40px; -} - -.container_16 .grid_2 { - width: 100px; -} - -.container_16 .grid_3 { - width: 160px; -} - -.container_16 .grid_4 { - width: 220px; -} - -.container_16 .grid_5 { - width: 280px; -} - -.container_16 .grid_6 { - width: 340px; -} - -.container_16 .grid_7 { - width: 400px; -} - -.container_16 .grid_8 { - width: 460px; -} - -.container_16 .grid_9 { - width: 520px; -} - -.container_16 .grid_10 { - width: 580px; -} - -.container_16 .grid_11 { - width: 640px; -} - -.container_16 .grid_12 { - width: 700px; -} - -.container_16 .grid_13 { - width: 760px; -} - -.container_16 .grid_14 { - width: 820px; -} - -.container_16 .grid_15 { - width: 880px; -} - -.container_16 .grid_16 { - width: 940px; -} - -/* Prefix Extra Space >> 16 Columns -----------------------------------------------------------------------------------------------------*/ - -.container_16 .prefix_1 { - padding-left: 60px; -} - -.container_16 .prefix_2 { - padding-left: 120px; -} - -.container_16 .prefix_3 { - padding-left: 180px; -} - -.container_16 .prefix_4 { - padding-left: 240px; -} - -.container_16 .prefix_5 { - padding-left: 300px; -} - -.container_16 .prefix_6 { - padding-left: 360px; -} - -.container_16 .prefix_7 { - padding-left: 420px; -} - -.container_16 .prefix_8 { - padding-left: 480px; -} - -.container_16 .prefix_9 { - padding-left: 540px; -} - -.container_16 .prefix_10 { - padding-left: 600px; -} - -.container_16 .prefix_11 { - padding-left: 660px; -} - -.container_16 .prefix_12 { - padding-left: 720px; -} - -.container_16 .prefix_13 { - padding-left: 780px; -} - -.container_16 .prefix_14 { - padding-left: 840px; -} - -.container_16 .prefix_15 { - padding-left: 900px; -} - -/* Suffix Extra Space >> 16 Columns -----------------------------------------------------------------------------------------------------*/ - -.container_16 .suffix_1 { - padding-right: 60px; -} - -.container_16 .suffix_2 { - padding-right: 120px; -} - -.container_16 .suffix_3 { - padding-right: 180px; -} - -.container_16 .suffix_4 { - padding-right: 240px; -} - -.container_16 .suffix_5 { - padding-right: 300px; -} - -.container_16 .suffix_6 { - padding-right: 360px; -} - -.container_16 .suffix_7 { - padding-right: 420px; -} - -.container_16 .suffix_8 { - padding-right: 480px; -} - -.container_16 .suffix_9 { - padding-right: 540px; -} - -.container_16 .suffix_10 { - padding-right: 600px; -} - -.container_16 .suffix_11 { - padding-right: 660px; -} - -.container_16 .suffix_12 { - padding-right: 720px; -} - -.container_16 .suffix_13 { - padding-right: 780px; -} - -.container_16 .suffix_14 { - padding-right: 840px; -} - -.container_16 .suffix_15 { - padding-right: 900px; -} - -/* Push Space >> 16 Columns -----------------------------------------------------------------------------------------------------*/ - -.container_16 .push_1 { - left: 60px; -} - -.container_16 .push_2 { - left: 120px; -} - -.container_16 .push_3 { - left: 180px; -} - -.container_16 .push_4 { - left: 240px; -} - -.container_16 .push_5 { - left: 300px; -} - -.container_16 .push_6 { - left: 360px; -} - -.container_16 .push_7 { - left: 420px; -} - -.container_16 .push_8 { - left: 480px; -} - -.container_16 .push_9 { - left: 540px; -} - -.container_16 .push_10 { - left: 600px; -} - -.container_16 .push_11 { - left: 660px; -} - -.container_16 .push_12 { - left: 720px; -} - -.container_16 .push_13 { - left: 780px; -} - -.container_16 .push_14 { - left: 840px; -} - -.container_16 .push_15 { - left: 900px; -} - -/* Pull Space >> 16 Columns -----------------------------------------------------------------------------------------------------*/ - -.container_16 .pull_1 { - left: -60px; -} - -.container_16 .pull_2 { - left: -120px; -} - -.container_16 .pull_3 { - left: -180px; -} - -.container_16 .pull_4 { - left: -240px; -} - -.container_16 .pull_5 { - left: -300px; -} - -.container_16 .pull_6 { - left: -360px; -} - -.container_16 .pull_7 { - left: -420px; -} - -.container_16 .pull_8 { - left: -480px; -} - -.container_16 .pull_9 { - left: -540px; -} - -.container_16 .pull_10 { - left: -600px; -} - -.container_16 .pull_11 { - left: -660px; -} - -.container_16 .pull_12 { - left: -720px; -} - -.container_16 .pull_13 { - left: -780px; -} - -.container_16 .pull_14 { - left: -840px; -} - -.container_16 .pull_15 { - left: -900px; -} - -/* `Clear Floated Elements -----------------------------------------------------------------------------------------------------*/ - -/* http://sonspring.com/journal/clearing-floats */ - -.clear { - clear: both; - display: block; - overflow: hidden; - visibility: hidden; - width: 0; - height: 0; -} - -/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */ - -.clearfix:before, -.clearfix:after, -.container_16:before, -.container_16:after { - content: '.'; - display: block; - overflow: hidden; - visibility: hidden; - font-size: 0; - line-height: 0; - width: 0; - height: 0; -} - -.clearfix:after, -.container_16:after { - clear: both; -} - -/* - The following zoom:1 rule is specifically for IE6 + IE7. - Move to separate stylesheet if invalid CSS is a problem. -*/ - -.clearfix, -.container_16 { - zoom: 1; -} \ No newline at end of file diff --git a/extlib/960.gs/MIT.txt b/extlib/960.gs/MIT.txt deleted file mode 100644 index 5a2aeb47..00000000 --- a/extlib/960.gs/MIT.txt +++ /dev/null @@ -1,20 +0,0 @@ -Copyright (c) - -Permission is hereby granted, free of charge, to any person obtaining -a copy of this software and associated documentation files (the -"Software"), to deal in the Software without restriction, including -without limitation the rights to use, copy, modify, merge, publish, -distribute, sublicense, and/or sell copies of the Software, and to -permit persons to whom the Software is furnished to do so, subject to -the following conditions: - -The above copyright notice and this permission notice shall be -included in all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF -MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE -LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION -OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION -WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/extlib/960.gs/README.txt b/extlib/960.gs/README.txt deleted file mode 100755 index da0ea86f..00000000 --- a/extlib/960.gs/README.txt +++ /dev/null @@ -1,54 +0,0 @@ -=============== -960 GRID SYSTEM -=============== - -Created by Nathan Smith. See the official site for more info: http://960.gs/ - -============================================================================ - -To install the Adobe Fireworks extension, simply double-click the *.mxp file -included in the /fireworks_extension directory. If you are running Windows 7 -you will need admin permissions in order to install this extension properly. - -============================================================================ - -Thank you for downloading the 960 Grid System. I hope it helps to streamline -web development workflow. Enclosed in the bundle are printable sketch sheets -and template files for Adobe Fireworks and Photoshop, OmniGraffle and Visio. - -Also included is a lightweight CSS file, which contains the grid dimensions. -To use this file, simply include the 960.css in the of the HTML page. -You may also use the reset.css and text.css files, or opt to leave them out. -Here is an example of the XHTML code necessary to incorporate the CSS files: - - - - - - - -It is worth noting that these styles do not automatically make up a finished -site design. They are simply a starting point, ideally for rapid prototyping -or as a basis for creating your own designs. You should not feel constrained -by the way I have built the initial code. If you disagree with how something -has been done, feel free to revise it for the needs of your particular site. - -The files in the 960 Grid System are free of charge, licensed under MIT/GPL. - -============================================================================ - -Note that if you are building a site in a language which reads from right to -left, use the CSS files that end in "_rtl.css" instead. Denote the language: - - - -Be sure to replace "..." with the appropriate two-letter abbreviation of the -language you are using. Example: lang="he" for Hebrew, lang="ar" for Arabic. - -============================================================================ - -GPL license: -http://www.gnu.org/licenses/gpl.html - -MIT license: -http://www.opensource.org/licenses/mit-license.php \ No newline at end of file diff --git a/extlib/960.gs/reset.css b/extlib/960.gs/reset.css deleted file mode 100644 index 87b7f368..00000000 --- a/extlib/960.gs/reset.css +++ /dev/null @@ -1,202 +0,0 @@ -/* `XHTML, HTML4, HTML5 Reset -----------------------------------------------------------------------------------------------------*/ - -a, -abbr, -acronym, -address, -applet, -article, -aside, -audio, -b, -big, -blockquote, -body, -canvas, -caption, -center, -cite, -code, -dd, -del, -details, -dfn, -dialog, -div, -dl, -dt, -em, -embed, -fieldset, -figcaption, -figure, -font, -footer, -form, -h1, -h2, -h3, -h4, -h5, -h6, -header, -hgroup, -hr, -html, -i, -iframe, -img, -ins, -kbd, -label, -legend, -li, -mark, -menu, -meter, -nav, -object, -ol, -output, -p, -pre, -progress, -q, -rp, -rt, -ruby, -s, -samp, -section, -small, -span, -strike, -strong, -sub, -summary, -sup, -table, -tbody, -td, -tfoot, -th, -thead, -time, -tr, -tt, -u, -ul, -var, -video, -xmp { - border: 0; - margin: 0; - padding: 0; - font-size: 100%; -} - -html, -body { - height: 100%; -} - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -menu, -nav, -section { -/* - Override the default (display: inline) for - browsers that do not recognize HTML5 tags. - - IE8 (and lower) requires a shiv: - http://ejohn.org/blog/html5-shiv -*/ - display: block; -} - -b, -strong { -/* - Makes browsers agree. - IE + Opera = font-weight: bold. - Gecko + WebKit = font-weight: bolder. -*/ - font-weight: bold; -} - -img { - color: transparent; - font-size: 0; - vertical-align: middle; -/* - For IE. - http://css-tricks.com/ie-fix-bicubic-scaling-for-images -*/ - -ms-interpolation-mode: bicubic; -} - -li { -/* - For IE6 + IE7. -*/ - display: list-item; -} - -table { - border-collapse: collapse; - border-spacing: 0; -} - -th, -td, -caption { - font-weight: normal; - vertical-align: top; - text-align: left; -} - -q { - quotes: none; -} - -q:before, -q:after { - content: ''; - content: none; -} - -sub, -sup, -small { - font-size: 75%; -} - -sub, -sup { - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -svg { -/* - For IE9. -*/ - overflow: hidden; -} \ No newline at end of file diff --git a/extlib/960.gs/text.css b/extlib/960.gs/text.css deleted file mode 100644 index 1a6b302f..00000000 --- a/extlib/960.gs/text.css +++ /dev/null @@ -1,86 +0,0 @@ -/* - 960 Grid System ~ Text CSS. - Learn more ~ http://960.gs/ - - Licensed under GPL and MIT. -*/ - -/* `Basic HTML -----------------------------------------------------------------------------------------------------*/ - -body { - font: 13px/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif; -} - -pre, -code { - font-family: 'DejaVu Sans Mono', Monaco, Consolas, monospace; -} - -hr { - border: 0 #ccc solid; - border-top-width: 1px; - clear: both; - height: 0; -} - -/* `Headings -----------------------------------------------------------------------------------------------------*/ - -h1 { - font-size: 25px; -} - -h2 { - font-size: 23px; -} - -h3 { - font-size: 21px; -} - -h4 { - font-size: 19px; -} - -h5 { - font-size: 17px; -} - -h6 { - font-size: 15px; -} - -/* `Spacing -----------------------------------------------------------------------------------------------------*/ - -ol { - list-style: decimal; -} - -ul { - list-style: disc; -} - -li { - margin-left: 30px; -} - -p, -dl, -hr, -h1, -h2, -h3, -h4, -h5, -h6, -ol, -ul, -pre, -table, -address, -fieldset, -figure { - margin-bottom: 20px; -} \ No newline at end of file diff --git a/mediagoblin/static/css/extlib/960_16_col.css b/mediagoblin/static/css/extlib/960_16_col.css deleted file mode 120000 index d4e43898..00000000 --- a/mediagoblin/static/css/extlib/960_16_col.css +++ /dev/null @@ -1 +0,0 @@ -../../../../extlib/960.gs/960_16_col.css \ No newline at end of file diff --git a/mediagoblin/static/css/extlib/reset.css b/mediagoblin/static/css/extlib/reset.css deleted file mode 120000 index 65d06d34..00000000 --- a/mediagoblin/static/css/extlib/reset.css +++ /dev/null @@ -1 +0,0 @@ -../../../../extlib/960.gs/reset.css \ No newline at end of file diff --git a/mediagoblin/static/css/extlib/text.css b/mediagoblin/static/css/extlib/text.css deleted file mode 120000 index 2d864de4..00000000 --- a/mediagoblin/static/css/extlib/text.css +++ /dev/null @@ -1 +0,0 @@ -../../../../extlib/960.gs/text.css \ No newline at end of file diff --git a/mediagoblin/static/css/reset.css b/mediagoblin/static/css/reset.css new file mode 100644 index 00000000..6ce25ce7 --- /dev/null +++ b/mediagoblin/static/css/reset.css @@ -0,0 +1,49 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + diff --git a/mediagoblin/templates/mediagoblin/base.html b/mediagoblin/templates/mediagoblin/base.html index 41efbc0d..6972fe2f 100644 --- a/mediagoblin/templates/mediagoblin/base.html +++ b/mediagoblin/templates/mediagoblin/base.html @@ -21,11 +21,7 @@ {% block title %}{{ app_config['html_title'] }}{% endblock %} - - + href="{{ request.staticdirect('/css/reset.css') }}"/> Date: Sun, 18 Dec 2011 01:32:13 +0100 Subject: [PATCH 03/10] Media query for everything(?) below 960px wide --- mediagoblin/static/css/base.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css index 805f0e29..effcec69 100644 --- a/mediagoblin/static/css/base.css +++ b/mediagoblin/static/css/base.css @@ -390,7 +390,7 @@ table.media_panel th { margin-left: 10px; } -@media screen and (max-width: 480px) { +@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 960px) { .navigation_button { position: fixed; bottom: 0px; From 1bb8eb89c7566cb473c2a7c317420bceaf8e9111 Mon Sep 17 00:00:00 2001 From: Jef van Schendel Date: Sun, 18 Dec 2011 01:37:57 +0100 Subject: [PATCH 04/10] Remove first 960.gs classes --- mediagoblin/static/css/base.css | 27 +++++++++++++++------ mediagoblin/templates/mediagoblin/base.html | 12 +++------ 2 files changed, 23 insertions(+), 16 deletions(-) diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css index effcec69..d3136788 100644 --- a/mediagoblin/static/css/base.css +++ b/mediagoblin/static/css/base.css @@ -84,23 +84,43 @@ input, textarea { .mediagoblin_body { position: relative; min-height: 100%; + margin-left: auto; + margin-right: auto; + width: 960px; } .mediagoblin_header { + width: 940px; height: 36px; + margin-left: 10px; + margin-right: 10px; padding-top: 14px; margin-bottom: 20px; border-bottom: 1px solid #333; } +.mediagoblin_header_right { + float: right; +} + a.mediagoblin_logo{ color: #fff; font-weight: bold; margin-right: 8px; } +.mediagoblin_content { + width: 940px; + margin-left: 10px; + margin-right: 10px; + padding-bottom: 74px; +} + .mediagoblin_footer { + width: 940px; height: 30px; + margin-left: 10px; + margin-right: 10px; border-top: 1px solid #333; bottom: 0px; padding-top: 8px; @@ -108,13 +128,6 @@ a.mediagoblin_logo{ font-size: 0.875em; } -.mediagoblin_content { - padding-bottom: 74px; -} - -.mediagoblin_header_right { - float: right; -} /* common website elements */ diff --git a/mediagoblin/templates/mediagoblin/base.html b/mediagoblin/templates/mediagoblin/base.html index 6972fe2f..870a4861 100644 --- a/mediagoblin/templates/mediagoblin/base.html +++ b/mediagoblin/templates/mediagoblin/base.html @@ -37,8 +37,7 @@ {% block mediagoblin_body %}
{% block mediagoblin_header %} -
-
+
{% block mediagoblin_logo %}
MediaGoblin, a GNU project {%- endtrans %}
-
{% endblock %} {% endblock mediagoblin_body %}
From 4fe9c9b99fc14f827d87ef803a9a67508591220f Mon Sep 17 00:00:00 2001 From: Jef van Schendel Date: Sun, 18 Dec 2011 01:41:01 +0100 Subject: [PATCH 05/10] Move reset.css to extlib and symlink it --- {mediagoblin/static/css => extlib/reset}/reset.css | 0 mediagoblin/static/css/extlib/reset.css | 1 + 2 files changed, 1 insertion(+) rename {mediagoblin/static/css => extlib/reset}/reset.css (100%) create mode 120000 mediagoblin/static/css/extlib/reset.css diff --git a/mediagoblin/static/css/reset.css b/extlib/reset/reset.css similarity index 100% rename from mediagoblin/static/css/reset.css rename to extlib/reset/reset.css diff --git a/mediagoblin/static/css/extlib/reset.css b/mediagoblin/static/css/extlib/reset.css new file mode 120000 index 00000000..6084e137 --- /dev/null +++ b/mediagoblin/static/css/extlib/reset.css @@ -0,0 +1 @@ +../../../../extlib/reset/reset.css \ No newline at end of file From 42a7c010321a01d1abb01d1137cc46cd97d66843 Mon Sep 17 00:00:00 2001 From: Jef van Schendel Date: Sun, 18 Dec 2011 01:54:58 +0100 Subject: [PATCH 06/10] Add styles to make media.html not fall apart entirely --- mediagoblin/static/css/base.css | 14 ++++++++++++++ .../templates/mediagoblin/user_pages/media.html | 4 ++-- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css index d3136788..2a05e988 100644 --- a/mediagoblin/static/css/base.css +++ b/mediagoblin/static/css/base.css @@ -126,8 +126,22 @@ a.mediagoblin_logo{ padding-top: 8px; text-align: center; font-size: 0.875em; + clear: both; } +.media_pane { + width: 640px; + margin-left: 0px; + margin-right: 10px; + float: left; +} + +.media_sidebar { + width: 280px; + margin-left: 10px; + margin-right: 0px; + float: left; +} /* common website elements */ diff --git a/mediagoblin/templates/mediagoblin/user_pages/media.html b/mediagoblin/templates/mediagoblin/user_pages/media.html index b9e31667..0c3f373e 100644 --- a/mediagoblin/templates/mediagoblin/user_pages/media.html +++ b/mediagoblin/templates/mediagoblin/user_pages/media.html @@ -37,7 +37,7 @@ {% endblock mediagoblin_head %} {% block mediagoblin_content %} -
+
{% block mediagoblin_media %} {% set display_media = request.app.public_store.file_url( @@ -141,7 +141,7 @@ media = media._id)) }} {% endif %}
-
+
{% trans user_url=request.urlgen( 'mediagoblin.user_pages.user_home', user=media.get_uploader().username), From 00c1d00771e0db68f7775968c0e33f000c5f36af Mon Sep 17 00:00:00 2001 From: Jef van Schendel Date: Sun, 18 Dec 2011 02:07:49 +0100 Subject: [PATCH 07/10] Change widths to percentages for small devices --- mediagoblin/static/css/base.css | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css index 2a05e988..187d1c7a 100644 --- a/mediagoblin/static/css/base.css +++ b/mediagoblin/static/css/base.css @@ -418,6 +418,9 @@ table.media_panel th { } @media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 960px) { + html { + padding:10px; + } .navigation_button { position: fixed; bottom: 0px; @@ -427,9 +430,19 @@ table.media_panel th { } .navigation_left { left: 0px; - width: 50%; } .media_image { - width: 480px; + width: 100%; + } + .mediagoblin_body { + width: 100%; + } + .mediagoblin_header, .mediagoblin_content, .mediagoblin_footer, .media_pane { + width: 100%; + margin-left: 0; + margin-right: 0; + } + .mediagoblin_footer { + margin-bottom: 100px; } } From 3ea6a305ce2addc8c2d6322f0d9bdca957bd972c Mon Sep 17 00:00:00 2001 From: Jef van Schendel Date: Fri, 30 Dec 2011 14:23:12 +0100 Subject: [PATCH 08/10] Lots of little fixes and removal of all 960.gs classes: * Removed

margin-top * Vertically align logo so Add-media button does not fall off * Remove last 960.gs traces (grid_X/container_X) and add custom classes/sizes to css * Add clear class * Update form_box and add form_box_xl for bigger forms * Switch all pages that use forms to new classes * Remove padding from notification messages so they take full width * Other tiny fixes I forgot about --- mediagoblin/static/css/base.css | 60 +++++++++++++++---- mediagoblin/templates/mediagoblin/404.html | 19 +++--- .../templates/mediagoblin/auth/change_fp.html | 6 +- .../mediagoblin/auth/forgot_password.html | 2 +- .../templates/mediagoblin/auth/login.html | 2 +- .../templates/mediagoblin/auth/register.html | 2 +- .../mediagoblin/edit/attachments.html | 2 +- .../templates/mediagoblin/edit/edit.html | 2 +- .../mediagoblin/edit/edit_profile.html | 2 +- .../templates/mediagoblin/listings/tag.html | 13 ++-- mediagoblin/templates/mediagoblin/root.html | 28 ++++----- .../templates/mediagoblin/submit/start.html | 2 +- .../mediagoblin/user_pages/gallery.html | 16 ++--- .../user_pages/media_confirm_delete.html | 2 +- .../mediagoblin/user_pages/user.html | 16 ++--- .../mediagoblin/utils/prev_next.html | 46 +++++++------- 16 files changed, 115 insertions(+), 105 deletions(-) diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css index 187d1c7a..e8924edf 100644 --- a/mediagoblin/static/css/base.css +++ b/mediagoblin/static/css/base.css @@ -44,24 +44,28 @@ form { /* text styles */ -h1{ +h1 { margin-bottom: 15px; margin-top: 15px; color: #fff; font-size: 1.875em; } -h2{ +h2 { font-size: 1.375em; margin-top: 20px; color: #fff; } -h3{ +h3 { border-bottom: 1px solid #333; font-size: 1.125em; } +p { + margin-top: 0px; +} + a { color: #86D4B1; } @@ -103,12 +107,16 @@ input, textarea { float: right; } -a.mediagoblin_logo{ +a.mediagoblin_logo { color: #fff; font-weight: bold; margin-right: 8px; } +.mediagoblin_logo img { + vertical-align: middle; +} + .mediagoblin_content { width: 940px; margin-left: 10px; @@ -143,6 +151,18 @@ a.mediagoblin_logo{ float: left; } +.profile_sidebar { + width: 340px; + margin-right: 10px; + float: left; +} + +.profile_showcase { + width: 580px; + margin-left: 10px; + float: left; +} + /* common website elements */ .button_action, .button_action_highlight { @@ -219,28 +239,33 @@ text-align: center; float: right; } -textarea#comment_content { - width: 634px; - height: 90px; - border: none; - background-color: #f1f1f1; - padding: 3px; +.clear { + clear: both; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; } /* forms */ -.form_box { +.form_box,.form_box_xl { background-color: #222; background-image: url("../images/background_lines.png"); background-repeat: repeat-x; - padding-bottom: 30px; - padding-top: 30px; + width: 340px; + padding: 30px 60px; margin-left: auto; margin-right: auto; display: block; float: none; } +.form_box_xl { + width: 460px; +} + .edit_box { background-image: url("../images/background_edit.png"); } @@ -294,6 +319,14 @@ textarea#comment_content { margin-bottom: 0px; } +textarea#comment_content { + width: 634px; + height: 90px; + border: none; + background-color: #f1f1f1; + padding: 3px; +} + /* media galleries */ .media_thumbnail { @@ -358,6 +391,7 @@ img.media_icon { ul.mediagoblin_messages { list-style: none inside; color: #f7f7f7; + padding: 0; } .mediagoblin_messages li { diff --git a/mediagoblin/templates/mediagoblin/404.html b/mediagoblin/templates/mediagoblin/404.html index 7db68941..392c14f5 100644 --- a/mediagoblin/templates/mediagoblin/404.html +++ b/mediagoblin/templates/mediagoblin/404.html @@ -18,17 +18,12 @@ {% extends "mediagoblin/base.html" %} {% block mediagoblin_content %} + {% trans %}Image of 404 goblin stressing out{% endtrans %}

{% trans %}Oops!{% endtrans %}

- -
-

{% trans %}There doesn't seem to be a page at this address. Sorry!{% endtrans %}

-

- {%- trans %}If you're sure the address is correct, maybe the page you're looking for has been moved or deleted.{% endtrans -%} -

-
- -
- {% trans %}Image of 404 goblin stressing out{% endtrans %} -
+

{% trans %}There doesn't seem to be a page at this address. Sorry!{% endtrans %}

+

+ {%- trans %}If you're sure the address is correct, maybe the page you're looking for has been moved or deleted.{% endtrans -%} +

+
{% endblock %} diff --git a/mediagoblin/templates/mediagoblin/auth/change_fp.html b/mediagoblin/templates/mediagoblin/auth/change_fp.html index 03a6583b..9c8c79bf 100644 --- a/mediagoblin/templates/mediagoblin/auth/change_fp.html +++ b/mediagoblin/templates/mediagoblin/auth/change_fp.html @@ -20,19 +20,15 @@ {% import "/mediagoblin/utils/wtforms.html" as wtforms_util %} {% block mediagoblin_content %} -
{{ csrf_token }} - -
+

{% trans %}Set your new password{% endtrans %}

- {{ wtforms_util.render_divs(cp_form) }}
-
{% endblock %} diff --git a/mediagoblin/templates/mediagoblin/auth/forgot_password.html b/mediagoblin/templates/mediagoblin/auth/forgot_password.html index 41940742..672e9d9a 100644 --- a/mediagoblin/templates/mediagoblin/auth/forgot_password.html +++ b/mediagoblin/templates/mediagoblin/auth/forgot_password.html @@ -23,7 +23,7 @@
{{ csrf_token }} -
+

{% trans %}Recover password{% endtrans %}

{{ wtforms_util.render_divs(fp_form) }}
diff --git a/mediagoblin/templates/mediagoblin/auth/login.html b/mediagoblin/templates/mediagoblin/auth/login.html index c3807e5f..993790eb 100644 --- a/mediagoblin/templates/mediagoblin/auth/login.html +++ b/mediagoblin/templates/mediagoblin/auth/login.html @@ -23,7 +23,7 @@ {{ csrf_token }} -
+

{% trans %}Log in{% endtrans %}

{% if login_failed %}
diff --git a/mediagoblin/templates/mediagoblin/auth/register.html b/mediagoblin/templates/mediagoblin/auth/register.html index bded1d7e..2520ca9b 100644 --- a/mediagoblin/templates/mediagoblin/auth/register.html +++ b/mediagoblin/templates/mediagoblin/auth/register.html @@ -43,7 +43,7 @@ -
+

{% trans %}Create an account!{% endtrans %}

{{ wtforms_util.render_divs(register_form) }} {{ csrf_token }} diff --git a/mediagoblin/templates/mediagoblin/edit/attachments.html b/mediagoblin/templates/mediagoblin/edit/attachments.html index 6a5ab896..ff357a8c 100644 --- a/mediagoblin/templates/mediagoblin/edit/attachments.html +++ b/mediagoblin/templates/mediagoblin/edit/attachments.html @@ -23,7 +23,7 @@ user= media.get_uploader().username, media= media._id) }}" method="POST" enctype="multipart/form-data"> -
+

Editing attachments for {{ media.title }}

-
+

{% trans media_title=media.title %}Editing {{ media_title }}{% endtrans %}

-
+

{%- trans username=user.username -%} Editing {{ username }}'s profile diff --git a/mediagoblin/templates/mediagoblin/listings/tag.html b/mediagoblin/templates/mediagoblin/listings/tag.html index f797f72f..a7cbe241 100644 --- a/mediagoblin/templates/mediagoblin/listings/tag.html +++ b/mediagoblin/templates/mediagoblin/listings/tag.html @@ -35,14 +35,9 @@ {% trans %}Media tagged with: {{ tag_name }}{% endtrans %}

-
- {{ object_gallery(request, media_entries, pagination) }} -
+ {{ object_gallery(request, media_entries, pagination) }} -
- {% set feed_url = request.urlgen( - 'mediagoblin.listings.tag_atom_feed', - tag=tag_slug) %} - {% include "mediagoblin/utils/feed_link.html" %} -
+ {% set feed_url = request.urlgen('mediagoblin.listings.tag_atom_feed', + tag=tag_slug) %} + {% include "mediagoblin/utils/feed_link.html" %} {% endblock %} diff --git a/mediagoblin/templates/mediagoblin/root.html b/mediagoblin/templates/mediagoblin/root.html index 0f769f2f..300570ad 100644 --- a/mediagoblin/templates/mediagoblin/root.html +++ b/mediagoblin/templates/mediagoblin/root.html @@ -23,22 +23,18 @@ {% if request.user %}

{% trans %}Explore{% endtrans %}

{% else %} -
-

{% trans %}Hi there, welcome to this MediaGoblin site!{% endtrans %}

-

{% trans %}This site is running MediaGoblin, an extraordinarily great piece of media hosting software.{% endtrans %}

-

{% trans %}To add your own media, place comments, save your favourites and more, you can log in with your MediaGoblin account.{% endtrans %}

- {% if allow_registration %} -

{% trans %}Don't have one yet? It's easy!{% endtrans %}

- {% trans register_url=request.urlgen('mediagoblin.auth.register') -%} - Create an account at this site - or - Set up MediaGoblin on your own server - {%- endtrans %} - {% endif %} -
-
- -
+ +

{% trans %}Hi there, welcome to this MediaGoblin site!{% endtrans %}

+

{% trans %}This site is running MediaGoblin, an extraordinarily great piece of media hosting software.{% endtrans %}

+

{% trans %}To add your own media, place comments, save your favourites and more, you can log in with your MediaGoblin account.{% endtrans %}

+ {% if allow_registration %} +

{% trans %}Don't have one yet? It's easy!{% endtrans %}

+ {% trans register_url=request.urlgen('mediagoblin.auth.register') -%} + Create an account at this site + or + Set up MediaGoblin on your own server + {%- endtrans %} + {% endif %}
{% endif %}

{% trans %}Most recent media{% endtrans %}

diff --git a/mediagoblin/templates/mediagoblin/submit/start.html b/mediagoblin/templates/mediagoblin/submit/start.html index 47914550..afae2f1f 100644 --- a/mediagoblin/templates/mediagoblin/submit/start.html +++ b/mediagoblin/templates/mediagoblin/submit/start.html @@ -22,7 +22,7 @@ {% block mediagoblin_content %} -
+

{% trans %}Add your media{% endtrans %}

{{ wtforms_util.render_divs(submit_form) }}
diff --git a/mediagoblin/templates/mediagoblin/user_pages/gallery.html b/mediagoblin/templates/mediagoblin/user_pages/gallery.html index b066dd71..b0bfacf8 100644 --- a/mediagoblin/templates/mediagoblin/user_pages/gallery.html +++ b/mediagoblin/templates/mediagoblin/user_pages/gallery.html @@ -42,14 +42,10 @@ {%- endtrans %} -
- {{ object_gallery(request, media_entries, pagination) }} -
- -
- {% set feed_url = request.urlgen( - 'mediagoblin.user_pages.atom_feed', - user=user.username) %} - {% include "mediagoblin/utils/feed_link.html" %} -
+ {{ object_gallery(request, media_entries, pagination) }} + + {% set feed_url = request.urlgen('mediagoblin.user_pages.atom_feed', + user=user.username) %} + {% include "mediagoblin/utils/feed_link.html" %} + {% endblock %} diff --git a/mediagoblin/templates/mediagoblin/user_pages/media_confirm_delete.html b/mediagoblin/templates/mediagoblin/user_pages/media_confirm_delete.html index 7c7218ae..8e0f2904 100644 --- a/mediagoblin/templates/mediagoblin/user_pages/media_confirm_delete.html +++ b/mediagoblin/templates/mediagoblin/user_pages/media_confirm_delete.html @@ -25,7 +25,7 @@ user=media.get_uploader().username, media=media._id) }}" method="POST" enctype="multipart/form-data"> -
+

{%- trans title=media.title -%} Really delete {{ title }}? diff --git a/mediagoblin/templates/mediagoblin/user_pages/user.html b/mediagoblin/templates/mediagoblin/user_pages/user.html index b952e88c..8a1d3a76 100644 --- a/mediagoblin/templates/mediagoblin/user_pages/user.html +++ b/mediagoblin/templates/mediagoblin/user_pages/user.html @@ -46,7 +46,7 @@ {% elif user.status == "needs_email_verification" %} {% if user == request.user %} {# this should only be visible when you are this user #} -
+

{% trans %}Email verification needed{% endtrans %}

@@ -66,7 +66,7 @@

{% else %} {# if the user is not you, but still needs to verify their email #} -
+

{% trans %}Email verification needed{% endtrans %}

@@ -91,7 +91,7 @@ {% if not user.url and not user.bio %} {% if request.user._id == user._id %} -

+

{% trans %}Here's a spot to tell others about yourself.{% endtrans %}

@@ -102,7 +102,7 @@
{% else %} -
+

{% trans -%} This user hasn't filled in their profile (yet). @@ -111,7 +111,7 @@

{% endif %} {% else %} -
+
{% include "mediagoblin/utils/profile.html" %} {% if request.user._id == user._id or request.user.is_admin %} +
{{ object_gallery(request, media_entries, pagination, pagination_base_url=user_gallery_url, col_number=3) }} {% include "mediagoblin/utils/object_gallery.html" %} @@ -141,7 +141,7 @@
{% else %} {% if request.user._id == user._id %} -
+

{% trans -%} This is where your media will appear, but you don't seem to have added anything yet. @@ -153,7 +153,7 @@

{% else %} -
+

{% trans -%} There doesn't seem to be any media here yet... diff --git a/mediagoblin/templates/mediagoblin/utils/prev_next.html b/mediagoblin/templates/mediagoblin/utils/prev_next.html index b0c01963..66766555 100644 --- a/mediagoblin/templates/mediagoblin/utils/prev_next.html +++ b/mediagoblin/templates/mediagoblin/utils/prev_next.html @@ -21,28 +21,26 @@ {% set next_entry_url = media.url_to_next(request.urlgen) %} {% if prev_entry_url or next_entry_url %} -

- {# There are no previous entries for the very first media entry #} - {% if prev_entry_url %} - - ← {% trans %}newer{% endtrans %} - - {% else %} - {# This is the first entry. display greyed-out 'previous' image #} -

- ← {% trans %}newer{% endtrans %} -

- {% endif %} - {# Likewise, this could be the very last media entry #} - {% if next_entry_url %} - - {% trans %}older{% endtrans %} → - - {% else %} - {# This is the last entry. display greyed-out 'next' image #} -

- {% trans %}older{% endtrans %} → -

- {% endif %} -
+ {# There are no previous entries for the very first media entry #} + {% if prev_entry_url %} + + ← {% trans %}newer{% endtrans %} + + {% else %} + {# This is the first entry. display greyed-out 'previous' image #} +

+ ← {% trans %}newer{% endtrans %} +

+ {% endif %} + {# Likewise, this could be the very last media entry #} + {% if next_entry_url %} + + {% trans %}older{% endtrans %} → + + {% else %} + {# This is the last entry. display greyed-out 'next' image #} +

+ {% trans %}older{% endtrans %} → +

+ {% endif %} {% endif %} From 426808cc8fe4961e938bc8f6df10ea755980e6c1 Mon Sep 17 00:00:00 2001 From: Jef van Schendel Date: Fri, 30 Dec 2011 18:01:28 +0100 Subject: [PATCH 09/10] Random changes that break stuff and eat piglets --- mediagoblin/static/css/base.css | 41 +++++++++++++++------------------ 1 file changed, 19 insertions(+), 22 deletions(-) diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css index e8924edf..8ed94e36 100644 --- a/mediagoblin/static/css/base.css +++ b/mediagoblin/static/css/base.css @@ -29,7 +29,6 @@ body { background-color: #111; background-image: url("../images/background.png"); color: #C3C3C3; - font-family: sans-serif; padding: none; margin: 0px; height: 100%; @@ -94,7 +93,7 @@ input, textarea { } .mediagoblin_header { - width: 940px; + width: 100%; height: 36px; margin-left: 10px; margin-right: 10px; @@ -118,14 +117,14 @@ a.mediagoblin_logo { } .mediagoblin_content { - width: 940px; + width: 100%; margin-left: 10px; margin-right: 10px; padding-bottom: 74px; } .mediagoblin_footer { - width: 940px; + width: 100%; height: 30px; margin-left: 10px; margin-right: 10px; @@ -451,10 +450,22 @@ table.media_panel th { margin-left: 10px; } -@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 960px) { - html { - padding:10px; +@media screen and (max-width: 960px) { + .mediagoblin_body { + width: 100%; } + .mediagoblin_footer { + position: fixed; + left: 0px; + top: 100px; + width: 50px; + height: 20px; + background-color: #f00; + } +} + + + /* old code .navigation_button { position: fixed; bottom: 0px; @@ -465,18 +476,4 @@ table.media_panel th { .navigation_left { left: 0px; } - .media_image { - width: 100%; - } - .mediagoblin_body { - width: 100%; - } - .mediagoblin_header, .mediagoblin_content, .mediagoblin_footer, .media_pane { - width: 100%; - margin-left: 0; - margin-right: 0; - } - .mediagoblin_footer { - margin-bottom: 100px; - } -} + */ From 7df9f45c32d7fd2ae5ae6c137ebf96437f764323 Mon Sep 17 00:00:00 2001 From: Jef van Schendel Date: Thu, 5 Jan 2012 21:36:24 +0100 Subject: [PATCH 10/10] Several changes for mobile layout --- mediagoblin/static/css/base.css | 32 ++++++--------------- mediagoblin/templates/mediagoblin/base.html | 1 + mediagoblin/templates/mediagoblin/root.html | 2 +- 3 files changed, 11 insertions(+), 24 deletions(-) diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css index 8ed94e36..e89ce8a2 100644 --- a/mediagoblin/static/css/base.css +++ b/mediagoblin/static/css/base.css @@ -85,18 +85,14 @@ input, textarea { /* website structure */ .mediagoblin_body { - position: relative; - min-height: 100%; - margin-left: auto; - margin-right: auto; - width: 960px; + margin: auto; + width: 96%; + max-width: 960px; } .mediagoblin_header { width: 100%; height: 36px; - margin-left: 10px; - margin-right: 10px; padding-top: 14px; margin-bottom: 20px; border-bottom: 1px solid #333; @@ -118,16 +114,12 @@ a.mediagoblin_logo { .mediagoblin_content { width: 100%; - margin-left: 10px; - margin-right: 10px; padding-bottom: 74px; } .mediagoblin_footer { width: 100%; height: 30px; - margin-left: 10px; - margin-right: 10px; border-top: 1px solid #333; bottom: 0px; padding-top: 8px; @@ -253,16 +245,17 @@ text-align: center; background-color: #222; background-image: url("../images/background_lines.png"); background-repeat: repeat-x; - width: 340px; - padding: 30px 60px; - margin-left: auto; - margin-right: auto; + padding: 3% 5%; display: block; float: none; + width: 90%; + max-width: 340px; + margin-left: auto; + margin-right: auto; } .form_box_xl { - width: 460px; + max-width: 460px; } .edit_box { @@ -452,15 +445,8 @@ table.media_panel th { @media screen and (max-width: 960px) { .mediagoblin_body { - width: 100%; } .mediagoblin_footer { - position: fixed; - left: 0px; - top: 100px; - width: 50px; - height: 20px; - background-color: #f00; } } diff --git a/mediagoblin/templates/mediagoblin/base.html b/mediagoblin/templates/mediagoblin/base.html index 870a4861..f3912752 100644 --- a/mediagoblin/templates/mediagoblin/base.html +++ b/mediagoblin/templates/mediagoblin/base.html @@ -19,6 +19,7 @@ + {% block title %}{{ app_config['html_title'] }}{% endblock %} diff --git a/mediagoblin/templates/mediagoblin/root.html b/mediagoblin/templates/mediagoblin/root.html index 300570ad..3f834572 100644 --- a/mediagoblin/templates/mediagoblin/root.html +++ b/mediagoblin/templates/mediagoblin/root.html @@ -23,8 +23,8 @@ {% if request.user %}

{% trans %}Explore{% endtrans %}

{% else %} -

{% trans %}Hi there, welcome to this MediaGoblin site!{% endtrans %}

+

{% trans %}This site is running MediaGoblin, an extraordinarily great piece of media hosting software.{% endtrans %}

{% trans %}To add your own media, place comments, save your favourites and more, you can log in with your MediaGoblin account.{% endtrans %}

{% if allow_registration %}