Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

FLUID-3782: Styling and markup tweaks to the full page UI options to …

…match wireframes
  • Loading branch information...
commit f661232a50171f79c88e4e10bcb569f2a7620457 1 parent af93442
James Yoon authored
View
2  src/webapp/components/uiOptions/css/Slider.css
@@ -10,7 +10,7 @@
.fl-slider .fl-handle, .fl-slider a {position:absolute; display:block; height:32px; width:32px; top:0; left:0;}
.fl-slider a { background-image:url('../images/uio_icon_sliderhandle.png'); background-repeat:no-repeat; background-position:center center; bottom: 16px;}
.fl-slider-vert .fl-handle, .fl-slider-vert a {margin-left:-0.2em; margin-top:-0.5em;}
-.fl-slider-horz .fl-handle, .fl-slider-horz a {margin-top:-1.2em; margin-left:-0.5em;}
+.fl-slider-horz .fl-handle, .fl-slider-horz a {margin-top:-14px; margin-left:-6px;}
.fl-left-slider-image { padding-right: 8px; }
.fl-right-slider-image { padding-left: 0px; padding-right: 10px;}
View
90 src/webapp/components/uiOptions/css/UIOptions.css
@@ -1,24 +1,42 @@
/* UI Option default styles */
+/* An alternate clearfix solution from http://perishablepress.com/press/2009/12/06/new-clearfix-hack/*/
+.fl-clearfix:after {
+visibility: hidden;
+display: block;
+font-size: 0;
+content: " ";
+clear: both;
+height: 0;
+}
+* html .fl-clearfix { zoom: 1; } /* IE6 */
+*:first-child+html .fl-clearfix { zoom: 1; } /* IE7 */
+
/* Overall styles */
.fl-uiOptions {
font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
- font-size: 1em;
- margin-left: 40px;
- margin-right: 40px;
- max-width: 1280px;
- min-width: 880px;
+ font-size: 0.85em;
}
+.fl-uiOptions p {
+ font-size: 1.1em;
+}
+
+.fl-col-fixed-31em { width: 31em; }
+.fl-col-fixed-38em { width: 38em; }
+.fl-col-fixed-72em { width: 72em; }
+
/* Section headers */
.fl-uiOptions h2 {
font-size: 1.29em;
font-weight: bold;
- clear:both;
- border-top: 1px solid #999999;
- padding-top: 10px;
- padding-bottom: 10px;
+ clear: both;
+ border-top: 2px solid #dddddd;
+ color: #444444;
+ padding-top: 14px;
+ padding-bottom: 22px;
}
+
.fl-uiOptions h2 img {
margin-bottom: -3px;
padding-right: 5px;
@@ -30,9 +48,26 @@
}
.fl-uiOptions ul li {
- list-style: none;
- clear:both;
- padding-top: 12px;
+ list-style: none;
+ clear:both;
+}
+
+/* Categories of options (e.g., Text & Display, Layout & Navigation) */
+.fl-uio-category {
+ padding-bottom: 48px; /* separation between categories */
+}
+
+/* Individual options (e.g., text size, simplify layout, emphasize links) */
+.fl-uio-option-2col {
+ padding-top: 40px;
+}
+
+.fl-uio-option-1col {
+ padding-top: 28px;
+}
+
+.fl-uio-option-first {
+ padding-top: 8px;
}
/* Descriptions */
@@ -46,14 +81,13 @@
.fl-uiOptions label {
text-transform: uppercase;
font-size: 1.2em;
- padding-bottom: 2em;
}
/* Text and display section */
.fl-uiOptions .fl-uio-form label {
- display: block;
- float: left;
- width: 35%;
+ display: block;
+ float: left;
+ width: 14em;
}
.fl-uiOptions .fl-uio-form .fl-inputs {
@@ -72,8 +106,6 @@
/* Check boxes */
.fl-uiOptions input[type="checkbox"] {
- height: 2em;
- width: 2em;
margin-right:10px;
margin-bottom: 2em;
border: 1px solid black;
@@ -83,9 +115,8 @@
.fl-uiOptions select {
border: 2px solid #ebebeb;
}
-.fl-uiOptions option {
-
-}
+
+.fl-uiOptions option {}
.fl-uiOptions select#text-font {
font-weight:bold;
@@ -116,15 +147,20 @@
/* Apply buttons */
.fl-uiOptions .fl-uio-buttons {
margin-top: 1em;
+ float: left;
}
.fl-uiOptions .fl-uio-buttons input {
text-transform: uppercase;
text-decoration: underline;
- border: 1px solid #d7d7d7;
- background-color: #f0f0f0;
- padding: 5px;
+ font-weight: bold;
+ color: #333333;
+/* border: 2px solid #d7d7d7;*/
+ background: -moz-linear-gradient(bottom, #e0e0e0, #fff);
+ padding: 5px;
height: 32px;
+ font-size: 1em;
+ margin-right: 3px;
}
.fl-uiOptions .fl-uio-buttons .fl-uio-save {
@@ -132,6 +168,7 @@
background-image: url("../../../components/uiOptions/images/uio_icon_save_13x13.png");
background-repeat: no-repeat;
background-position: 4px 6px;
+ background: -moz-linear-gradient(bottom, #e0e0e0, #fff);
}
.fl-uiOptions .fl-uio-buttons .fl-uio-cancel {
@@ -139,10 +176,13 @@
background-image: url("../../../components/uiOptions/images/uio_icon_cancel_13x13.png");
background-repeat: no-repeat;
background-position: 3px 6px;
+ background: -moz-linear-gradient(bottom, #e0e0e0, #fff);
}
.fl-uio-preview h2 {
- font-weight: normal;
+ font-weight: lighter;
font-size: 1.8em;
color: #4D4D4D;
+ padding-top: 18px;
+ padding-bottom: 22px;
}
View
167 src/webapp/components/uiOptions/html/UIOptions.html
@@ -1,93 +1,98 @@
-<form id="options" action="" class="fl-uiOptions">
- <div class="flc-uiOptions-controls fl-col">
- <h2><img src="../../../components/uiOptions/images/uio_icon_textanddisplay_18x18.png" alt="" /> Text and display</h2>
-
- <ul class="fl-uio-form">
- <li class="flc-uiOptions-min-text-size">
- <label for="min-text-size" class="fl-label">Text Size</label>
- <div class="fl-inputs">
- <img class="fl-force-left fl-left-slider-image" src="../../../components/uiOptions/images/uio_icon_smallA_10x10.png" alt="" />
- <p class="flc-textfieldSlider-slider fl-slider fl-slider-horz"> </p>
- <span class="fl-force-right"><input id="min-text-size" class="flc-textfieldSlider-field" type="text" /> times</span>
- <img class="fl-force-right fl-right-slider-image" src="../../../components/uiOptions/images/uio_icon_bigA_20x20.png" alt="" />
- </div>
- </li>
- <li>
- <label for="text-font" class="fl-label">Text Style</label>
- <select class="flc-uiOptions-text-font" id="text-font">
- <option value="default" class="default">Default</option>
- <option value="times" class="times">Times New Roman</option>
- <option value="comic" class="comic">Comic Sans</option>
- <option value="arial" class="arial">Arial</option>
- <option value="verdana" class="verdana">Verdana</option>
- </select>
- </li>
- <li>
- <label class="fl-label" for="theme">Colour & Contrast</label>
- <select class="flc-uiOptions-theme" id="theme">
- <option value="default" class="default">Default</option>
- <option value="bw" class="bw">Black on white</option>
- <option value="wb" class="wb">White on black</option>
- <option value="by" class="by">Black on yellow</option>
- <option value="yb" class="yb">Yellow on black</option>
- </select>
- </li>
- <li class="flc-uiOptions-line-spacing fl-uiOptions-line-spacing">
- <label for="line-spacing" class="fl-label">Line Spacing</label>
- <div class="fl-inputs">
- <img class="fl-force-left fl-left-slider-image" src="../../../components/uiOptions/images/uio_icon_linesNarrow_16x12.png" alt="" />
- <p class="fl-slider fl-slider-horz flc-textfieldSlider-slider"> </p>
- <span class="fl-force-right"><input id="line-spacing" class="flc-textfieldSlider-field" type="text" /> times</span>
- <img class="fl-force-right fl-right-slider-image" src="../../../components/uiOptions/images/uio_icon_linesWide_16x21.png" alt="" />
- </div>
- </li>
- </ul>
-
- <h2><img src="../../../components/uiOptions/images/uio_icon_layoutandnavigation_18x18.png" alt="" /> Layout and navigation</h2>
- <ul>
- <li>
- <input type="checkbox" id="layout-choice" class="flc-uiOptions-layout fl-force-left" />
- <div class="fl-force-left">
- <label for="layout-choice" class="fl-label">Simplify Layout</label>
- <p class="fl-uio-option-description">Converts a page to a single column layout</p>
- </div>
- </li>
- <li>
- <input type="checkbox" id="toc-choice" class="flc-uiOptions-toc fl-force-left" />
- <div class="fl-force-left">
- <label for="toc-choice" class="fl-label">Show Table of Contents</label>
- <p class="fl-uio-option-description">Adds a table of contents to the top of the page</p>
- </div>
- </li>
- </ul>
+<form id="options" action="" class="fl-uiOptions fl-col-fixed-72em">
+ <div class="flc-uiOptions-controls fl-col-fixed-38em fl-force-left">
+ <div class="fl-uio-category">
+ <h2><img src="../../../components/uiOptions/images/uio_icon_textanddisplay_18x18.png" alt="" /> Text and display</h2>
+ <ul class="fl-uio-form fl-clearfix">
+ <li class="flc-uiOptions-min-text-size fl-uio-option fl-uio-option-first fl-uio-option-2col">
+ <label for="min-text-size" class="fl-label">Text Size</label>
+ <div class="fl-inputs">
+ <img class="fl-force-left fl-left-slider-image" src="../../../components/uiOptions/images/uio_icon_smallA_10x10.png" alt="" />
+ <div class="flc-textfieldSlider-slider fl-slider fl-slider-horz"> </div>
+ <span class="fl-force-right"><input id="min-text-size" class="flc-textfieldSlider-field" type="text" /> times</span>
+ <img class="fl-force-right fl-right-slider-image" src="../../../components/uiOptions/images/uio_icon_bigA_20x20.png" alt="" />
+ </div>
+ </li>
+ <li class= "fl-uio-option fl-uio-option-2col">
+ <label for="text-font" class="fl-label">Text Style</label>
+ <select class="flc-uiOptions-text-font fl-inputs" id="text-font">
+ <option value="default" class="default">Default</option>
+ <option value="times" class="times">Times New Roman</option>
+ <option value="comic" class="comic">Comic Sans</option>
+ <option value="arial" class="arial">Arial</option>
+ <option value="verdana" class="verdana">Verdana</option>
+ </select>
+ </li>
+ <li class= "fl-uio-option fl-uio-option-2col">
+ <label class="fl-label" for="theme">Colour & Contrast</label>
+ <select class="flc-uiOptions-theme fl-inputs" id="theme">
+ <option value="default" class="default">Default</option>
+ <option value="bw" class="bw">Black on white</option>
+ <option value="wb" class="wb">White on black</option>
+ <option value="by" class="by">Black on yellow</option>
+ <option value="yb" class="yb">Yellow on black</option>
+ </select>
+ </li>
+ <li class="flc-uiOptions-line-spacing fl-uiOptions-line-spacing fl-uio-option fl-uio-option-2col">
+ <label for="line-spacing" class="fl-label">Line Spacing</label>
+ <div class="fl-inputs">
+ <img class="fl-force-left fl-left-slider-image" src="../../../components/uiOptions/images/uio_icon_linesNarrow_16x12.png" alt="" />
+ <div class="fl-slider fl-slider-horz flc-textfieldSlider-slider"> </div>
+ <span class="fl-force-right"><input id="line-spacing" class="flc-textfieldSlider-field" type="text" /> times</span>
+ <img class="fl-force-right fl-right-slider-image" src="../../../components/uiOptions/images/uio_icon_linesWide_16x21.png" alt="" />
+ </div>
+ </li>
+ </ul>
+ </div>
+
+ <div class="fl-uio-category">
+ <h2><img src="../../../components/uiOptions/images/uio_icon_layoutandnavigation_18x18.png" alt="" /> Layout and navigation</h2>
+ <ul class="fl-clearfix">
+ <li class= "fl-uio-option fl-uio-option-first fl-uio-option-1col">
+ <input type="checkbox" id="layout-choice" class="flc-uiOptions-layout fl-force-left" />
+ <div class="fl-force-left">
+ <label for="layout-choice" class="fl-label">Simplify Layout</label>
+ <p class="fl-uio-option-description">Converts a page to a single column layout</p>
+ </div>
+ </li>
+ <li class= "fl-uio-option fl-uio-option-1col">
+ <input type="checkbox" id="toc-choice" class="flc-uiOptions-toc fl-force-left" />
+ <div class="fl-force-left">
+ <label for="toc-choice" class="fl-label">Show Table of Contents</label>
+ <p class="fl-uio-option-description">Adds a table of contents to the top of the page</p>
+ </div>
+ </li>
+ </ul>
+ </div>
- <h2><img src="../../../components/uiOptions/images/uio_icon_linksandbuttons_18x18.png" alt="" /> Links and buttons</h2>
- <ul>
- <li>
- <input type="checkbox" id="links-choice" class="flc-uiOptions-links-choice fl-force-left" />
- <div class="fl-force-left">
- <label for="links-choice" class="fl-label">Emphasize Links</label>
- <p class="fl-uio-option-description">Makes links larger, bold, and underlined</p>
- </div>
- </li>
- <li>
- <input type="checkbox" id="inputs-choice"class="flc-uiOptions-inputs-choice fl-force-left" />
- <div class="fl-force-left">
- <label for="inputs-choice" class="fl-label">Make Inputs Larger</label>
- <p class="fl-uio-option-description">Makes buttons, drop-down menus, text-fields, and other inputs larger</p>
- </div>
- </li>
- </ul>
+ <div class="fl-uio-category">
+ <h2><img src="../../../components/uiOptions/images/uio_icon_linksandbuttons_18x18.png" alt="" /> Links and buttons</h2>
+ <ul class="fl-clearfix">
+ <li class= "fl-uio-option fl-uio-option-first fl-uio-option-1col">
+ <input type="checkbox" id="links-choice" class="flc-uiOptions-links-choice fl-force-left" />
+ <div class="fl-force-left">
+ <label for="links-choice" class="fl-label">Emphasize Links</label>
+ <p class="fl-uio-option-description">Makes links larger, bold, and underlined</p>
+ </div>
+ </li>
+ <li class= "fl-uio-option fl-uio-option-1col">
+ <input type="checkbox" id="inputs-choice"class="flc-uiOptions-inputs-choice fl-force-left" />
+ <div class="fl-force-left">
+ <label for="inputs-choice" class="fl-label">Make Inputs Larger</label>
+ <p class="fl-uio-option-description">Makes buttons, drop-down menus, text-fields, and other inputs larger</p>
+ </div>
+ </li>
+ </ul>
+ </div>
</div>
- <div class="fl-col">
+ <div class="fl-col-fixed-31em fl-force-right">
<div class="fl-uio-preview">
<h2>Preview your changes</h2>
<iframe class="flc-uiOptions-preview-frame" src="" frameborder="0"></iframe>
</div>
<div class="fl-text-align-center fl-uio-buttons">
- <input class="flc-uiOptions-reset" type="button" value="Reset" />
<input class="flc-uiOptions-save fl-uio-save" type="button" value="Save and apply" />
+ <input class="flc-uiOptions-reset" type="button" value="Reset" />
<input class="flc-uiOptions-cancel fl-uio-cancel" type="button" value="Cancel" />
</div>
</div>
View
12 src/webapp/standalone-demos/uiOptions/css/UIOptions.css
@@ -0,0 +1,12 @@
+body {
+ font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
+ margin-left: 64px;
+ margin-right: 64px;
+ margin-top: 64px;
+}
+
+h1 {
+ font-size: 1.4em;
+ margin-bottom: 1.4em;
+ font-weight: bold;
+}
View
3  src/webapp/standalone-demos/uiOptions/html/UIOptions.html
@@ -5,7 +5,6 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-reset-global.css" />
- <link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-base-global.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-layout.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-text.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-theme-hc.css" />
@@ -19,6 +18,7 @@
<link rel="stylesheet" type="text/css" href="../../../lib/jquery/ui/css/fl-theme-slate/slate.css" />
<link rel="stylesheet" type="text/css" href="../../../lib/jquery/ui/css/fl-theme-hc/hc.css" />
<link rel="stylesheet" type="text/css" href="../../../lib/jquery/ui/css/fl-theme-hci/hci.css" />
+ <link rel="stylesheet" type="text/css" href="../css/UIOptions.css" />
<link rel="stylesheet" type="text/css" href="../../../components/uiOptions/css/UIOptions.css" />
<link rel="stylesheet" type="text/css" href="../../../components/uiOptions/css/Slider.css" />
@@ -67,7 +67,6 @@
</head>
<body>
-
<h1>User Interface Options</h1>
<div id="myUIOptions"></div>
Please sign in to comment.
Something went wrong with that request. Please try again.