Skip to content

Commit

Permalink
FLUID-3782: Styling and markup tweaks to the full page UI options to …
Browse files Browse the repository at this point in the history 
…match wireframes
  • Loading branch information
James Yoon committed May 5, 2011
1 parent af93442 commit f661232
Show file tree
Hide file tree
Showing 5 changed files with 165 additions and 109 deletions.
2 changes: 1 addition & 1 deletion src/webapp/components/uiOptions/css/Slider.css
View file
Expand Up @@ -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;}

Expand Down
90 changes: 65 additions & 25 deletions src/webapp/components/uiOptions/css/UIOptions.css
View file
@@ -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;
Expand All @@ -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 */
Expand All @@ -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 {
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -116,33 +147,42 @@
/* 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 {
padding-left: 16px;
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 {
padding-left: 16px;
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;
}
167 changes: 86 additions & 81 deletions src/webapp/components/uiOptions/html/UIOptions.html
View file
@@ -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>
Expand Down
12 changes: 12 additions & 0 deletions src/webapp/standalone-demos/uiOptions/css/UIOptions.css
View file
@@ -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;
}
3 changes: 1 addition & 2 deletions src/webapp/standalone-demos/uiOptions/html/UIOptions.html
View file
Expand Up @@ -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" />
Expand All @@ -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" />

Expand Down Expand Up @@ -67,7 +67,6 @@
</head>

<body>

<h1>User Interface Options</h1>

<div id="myUIOptions"></div>
Expand Down

0 comments on commit f661232

Please sign in to comment.