r111019 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r111018‎ | r111019 | r111020 >
Date:02:24, 9 February 2012
Author:brion
Status:deferred
Tags:
Comment:
Quick mockup of Glaucus layout for menu / touch target testing

https://www.mediawiki.org/wiki/Glaucus
Modified paths:
  • /trunk/mockups/glaucus-quick (added) (history)
  • /trunk/mockups/glaucus-quick/app.js (added) (history)
  • /trunk/mockups/glaucus-quick/glaucus.css (added) (history)
  • /trunk/mockups/glaucus-quick/index.html (added) (history)

Diff [purge]

Index: trunk/mockups/glaucus-quick/glaucus.css
——@@ -0,0 +1,116 @@
 2+html, body {
 3+ margin: 0;
 4+ padding: 0;
 5+
 6+ font-family: "Roboto", "Droid Sans", "Helvetica", sans-serif;
 7+}
 8+
 9+
 10+header {
 11+ position: fixed;
 12+ top: 0;
 13+ left: 0;
 14+ right: 0;
 15+ height: 69px;
 16+}
 17+
 18+.toolbar {
 19+ height: 45px;
 20+ width: 320px;
 21+ padding: 0;
 22+ color: white;
 23+ background: black;
 24+ /* needed on Android 2.3 */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3E3E3E), color-stop(14%,#393939), color-stop(32%,#2E2E2E), color-stop(64%,#151515), color-stop(84%,#080808), color-stop(100%,#000000));
 25+ background-image: -webkit-linear-gradient(top, #3E3E3E 0%,#393939 14%,#2E2E2E 32%,#151515 64%,#080808 84%,#010101 100%);
 26+ background-image: -moz-linear-gradient(top, #3E3E3E 0%,#393939 14%,#2E2E2E 32%,#151515 64%,#080808 84%,#010101 100%);
 27+ background-image: -ms-linear-gradient(top, #3E3E3E 0%,#393939 14%,#2E2E2E 32%,#151515 64%,#080808 84%,#010101 100%);
 28+ background-image: -o-linear-gradient(top, #3E3E3E 0%,#393939 14%,#2E2E2E 32%,#151515 64%,#080808 84%,#010101 100%);
 29+}
 30+
 31+.toolbar button {
 32+ -webkit-appearance: none;
 33+ -moz-appearance: none;
 34+
 35+ position: relative;
 36+ padding: 0;
 37+ margin: 0;
 38+
 39+ width: 19%;
 40+ height: 44px;
 41+
 42+ border: none;
 43+ background: none;
 44+ color: white;
 45+
 46+ overflow: hidden;
 47+}
 48+
 49+.toolbar button.active {
 50+ background: #0e43b5;
 51+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3963c0), color-stop(100%, #0e43b5));
 52+ background-image: -webkit-linear-gradient(top, 0% #3963c0, 100%, #0e43b5);
 53+ background-image: -moz-linear-gradient(top, 0% #3963c0, 100%, #0e43b5);
 54+ background-image: -ms-linear-gradient(top, 0% #3963c0, 100%, #0e43b5);
 55+ background-image: -o-linear-gradient(top, 0% #3963c0, 100%, #0e43b5);
 56+}
 57+
 58+.toolbar > button > span {
 59+ position: absolute;
 60+ text-align: center;
 61+ left: 0;
 62+ right: 0;
 63+ bottom: 2px;
 64+}
 65+
 66+.langbar {
 67+ overflow: hidden;
 68+ font-size: 13px;
 69+ padding: 1px 4px;
 70+}
 71+
 72+.langbar span {
 73+ color: #0645ad;
 74+}
 75+
 76+.langbar span.selected {
 77+ color: black;
 78+ font-weight: bold;
 79+ background: #e6e8fa !important;
 80+ border: solid 1px #0645ad !important;
 81+ border-radius: 2px;
 82+}
 83+
 84+#lang-selector {
 85+ position: relative;
 86+ top: -2em;
 87+ width: 100%;
 88+ opacity: 0;
 89+}
 90+
 91+
 92+.menu {
 93+ display: none;
 94+
 95+ position: absolute;
 96+ top: 45px;
 97+
 98+ background: black;
 99+ color: white;
 100+
 101+ padding: 12px;
 102+ margin: 0;
 103+}
 104+
 105+.menu li {
 106+ font-size: 13px;
 107+ height: 48px;
 108+ list-style: none;
 109+ padding-left: 40px;
 110+ padding-right: 12px;
 111+}
 112+
 113+
 114+
 115+#you-menu {
 116+ left: 64px;
 117+}
Property changes on: trunk/mockups/glaucus-quick/glaucus.css
___________________________________________________________________
Added: svn:mime-type
1118 + text/css
Index: trunk/mockups/glaucus-quick/index.html
——@@ -0,0 +1,73 @@
 2+<!DOCTYPE html>
 3+<html>
 4+
 5+<head>
 6+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
 7+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 8+ <title>Glaucus mockup touch test</title>
 9+ <link href="glaucus.css" type="text/css" rel="stylesheet">
 10+ <script src="http://code.jquery.com/jquery-1.7.1.js"></script>
 11+ <script src="app.js"></script>
 12+
 13+<body>
 14+ <header>
 15+ <div class="toolbar">
 16+ <button id="menu-wiki">
 17+ <span>Wikipedia</span>
 18+ </button>
 19+ <button id="menu-article">
 20+ <span>Article</span>
 21+ </button>
 22+ <button id="menu-you">
 23+ <span>You</span>
 24+ </button>
 25+ <button id="menu-contribute">
 26+ <span>Contribute</span>
 27+ </button>
 28+ <button id="menu-search">
 29+ <span>Search</span>
 30+ </button>
 31+ </div>
 32+ <div class="langbar">
 33+ <span class="selected">English</span>
 34+ •
 35+ <span class="lang">Deutsch</span>
 36+ •
 37+ <span class="lang">Español</span>
 38+ •
 39+ <span class="lang">Français</span>
 40+ •
 41+ <span class="lang">日本語</span>
 42+ •
 43+ <span class="lang">…</span>
 44+ </div>
 45+ <select id="lang-selector">
 46+ <option>English</option>
 47+ <option>Deutsch</option>
 48+ <option>Español</option>
 49+ <option>Français</option>
 50+ <option>日本語</option>
 51+ </select>
 52+ </header>
 53+ <div id="content">
 54+ </div>
 55+
 56+ <ul class="menu" id="wiki-menu">
 57+ <li id="menu-main-page"><a>Main Page</a>
 58+ <li id="menu-featured-content"><a>Featured Content</a>
 59+ <li id="menu-recent-changes"><a>Recent Changes</a>
 60+ <li id="menu-random-article"><a>Random Article</a>
 61+ <li><br>
 62+ <li id="menu-log-out"><a>Log Out</a>
 63+ </ul>
 64+
 65+ <ul class="menu" id="you-menu">
 66+ <li id="menu-self"><a>Jorm (WMF)</a>
 67+ <li id="menu-your-notifications"><a>Your notifications</a>
 68+ <li id="menu-your-talk"><a>Your Talk Page</a>
 69+ <li id="menu-your-watchlist"><a>Your Watchlist</a>
 70+ <li id="menu-your-contribs"><a>Your Contributions</a>
 71+ <li id="menu-your-preferences"><a>Your Preferences</a>
 72+ <li><br>
 73+ <li id="menu-log-out"><a>Log Out</a>
 74+ </ul>
Property changes on: trunk/mockups/glaucus-quick/index.html
___________________________________________________________________
Added: svn:mime-type
175 + text/html
Index: trunk/mockups/glaucus-quick/app.js
——@@ -0,0 +1,21 @@
 2+$(function() {
 3+
 4+ function setupMenu(button, menu) {
 5+ $(button).bind('click touchstart', function(e) {
 6+ e.preventDefault();
 7+
 8+ var $active = $('.toolbar button.active');
 9+ if ($active.length) {
 10+ $active.removeClass('active');
 11+ $('.menu').hide();
 12+ } else {
 13+ $(button).addClass('active');
 14+ $(menu).show();
 15+ }
 16+ });
 17+ }
 18+
 19+ setupMenu('#menu-wiki', '#wiki-menu');
 20+ setupMenu('#menu-you', '#you-menu');
 21+
 22+});
Property changes on: trunk/mockups/glaucus-quick/app.js
___________________________________________________________________
Added: svn:mime-type
123 + text/javascript