Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Studio 50 #46

Merged
merged 16 commits into from

3 participants

@abledaccess

Have at it. Here's hoping it's all settled. If it's not, please let me know. Thanks so much for all the help.

@jobara
Owner

@abledaccess looked this over with @cindyli today. For the most part, things look really good. I don't envy you having to work on IE. We had a couple of questions though. 1) Did you have a chance to look at the focus styling for IE7. Currently it's doesn't match the style of the theme.I'm assuming this has to do with the fact that IE7 may not support the Outline property. 2) There seems to be a lot of !important used in the IE8 specific css. It didn't seem like these were all necessary, and it does seem a bit odd that you would have to override some of the theme styles there. Do you know what is causing that?

@abledaccess
@abledaccess
@jobara
Owner
@abledaccess
@jobara
Owner
@abledaccess
@abledaccess

OK, as we discussed earlier, I resolved all the focusing issues in IE7. All but for the UIO button. I cannot find a fix anywhere! If you can, Justin, please let me know. When you can, of course. Thanks.

@jobara
Owner

@abledaccess You're right. It's pretty hard to find any info about fixing this focus issue in IE7. I've found couple of pages that might be useful to give you ideas on how to address it.

The first is about making buttons look like links. (Don't ask me why anyone would want to do that.) It's supposed to be cross browser compliant and does add keyboard focus back in. http://www.456bereastreet.com/archive/201110/styling_button_elements_to_look_like_links/

This second one is about removing the focus styling. Now, I'm not saying you should partake in any evils, but you might be able to manipulate the values to display the default focus better.
http://www.cssjunction.com/css/remove-black-border-around-input-buttons-in-ie-7/

Please let me know if any of those are helpful.

@jobara
Owner

@abledaccess I looked this over with @cindyli again. The IE7 focus issue looks fixed and it's all good. There were a few more things though. 1) when the Table of Contents is turned on and the text is large, when you shrink the width of the screen and the text spans multiple lines, the bullet goes to the bottom instead of to the top line. It looks like this is because of the display: inline-block 2) in IE7 when the Table of Contents, emphasize links, and comic sans are on, the text in the ToC is clipped at the bottom. The severity of this changes with the various text size settings, but we couldn't really see a pattern to it. 3) The IE 6 styles seem to have become broken. Not sure what's happened there.

Other than that, things are fine. We even tried it in the iPhone and iPad simulator and outside of some UIO issues, it looked great.

@abledaccess
@jobara
Owner

@abledaccess I was thinking that you had already gotten it working in IE6 for some reason. I guess for now don't worry about it. We may come back to it later though

@abledaccess
@jobara
Owner

@abledaccess we're in the final stages now.. just polishing things up and making them all shiny.

@abledaccess
@abledaccess
@abledaccess

Justin, sorry this has taken so long. In finding, and fixing, those errors I related to to you last week I discovered my fixes absolutely fixed the line-height in the ToC, despite using relative percentage units. I subsequently discovered any line-height applied to an element outside of body locked it at whatever value you set that element at in IE (7 and below). Meaning adjusting the UIOs line-height adjustment affected everything but the ToC.

Long story a bit shorter, to avoid the issues we were having with ToC, relating to line-height I mean — I fixed the list bullet behaviour — I had to set the body's line-height to 180% . Thing is I was unable to isolate the ToC, not even via the iframe's body class, and still have it respond to UIOS line-height slider.

Anyway have a look and let me know what you think. Thanks.

@jobara
Owner

@abledaccess it sounds like you are running into a bug with Infusion 1.4. If you switch to the other version of MyInfusion.js that you have in your repo you can probably remove your line-height settings and have things work properly in the regard again. Please let me know how that goes. Also if that works you can remove the old MyInfusion. If you still have the version.txt file that I sent you with the new MyInfusion could you add that beside the MyInfusion.js file.

@jobara
Owner

@abledaccess i was talking to @jameswy about the line-height. If the MyInfusion.js update doesn't solve the issue and you still need to explicitly set the line-height, then just leave the clipping issue and file a bug for it. The alternatives, large line-height everywhere or fixed line-height for the ToC seem to be worse.

@abledaccess
@cindyli cindyli merged commit 83f4efd into fluid-project:development
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Apr 30, 2012
  1. @abledaccess
Commits on May 7, 2012
  1. @abledaccess
Commits on May 8, 2012
  1. @abledaccess
  2. @abledaccess
Commits on May 10, 2012
  1. @abledaccess
  2. @abledaccess

    STUDIO-50: Put back some !important's on the login-out button to insu…

    abledaccess authored
    …re the text remains visible.
Commits on May 22, 2012
  1. @abledaccess
Commits on Jun 1, 2012
  1. @abledaccess

    STUDIO-50-ieFocusBug: The iefocusbutton.js is currently not wrapped i…

    abledaccess authored
    …n conditional comments, so it is global, rather than ie7 specific.
Commits on Jun 5, 2012
  1. @abledaccess

    STUDIO-50: Bug resolved.

    abledaccess authored
Commits on Jun 6, 2012
  1. @abledaccess

    STUDIO-50: I deleted of offending line in iebuttonfocus.js and update…

    abledaccess authored
    …d how the buttons are styled when active in IE7.
Commits on Jun 7, 2012
  1. @abledaccess
Commits on Jun 17, 2012
  1. @abledaccess

    STUDIO-50: Dealt with a few issues with ToC, which affected, so I fix…

    abledaccess authored
    …ed, a broader line-height issue.
Commits on Jun 18, 2012
  1. @abledaccess

    STUDIO-50: Removed the line-height CSS rule from the body as UIO hand…

    abledaccess authored
    …les the pages line-height by itself.
  2. @abledaccess
Commits on Jun 19, 2012
  1. @abledaccess
  2. @abledaccess

    STUDIO-50: Put back in display:inline-block for the fls-logo link to …

    abledaccess authored
    …correct an unwanted display behaviour.
This page is out of date. Refresh to see the latest.
View
59 wp-content/themes/fluid-studios/css/ie7.css
@@ -0,0 +1,59 @@
+/* IE7 specific styles
+--------------------------------------------------------------------------- */
+html{
+ overflow:auto;
+}
+html,body,.fls-wrapper{
+ height:99.9%;
+}
+
+.fl-theme-uio-bw button.fl-toggleButton.focus{ background-color:#fff !important; background-image:url("../images/icon-uio-black.png"); color:#000 !important;}
+.fl-theme-uio-bw .fls-loginout-link a:active{ background-color:#fff !important; background-image:url("../images/icon-login-black.png"); color:#000 !important;}
+.fl-theme-uio-bw .fls-back-link a:active{ background-color:#fff !important; background-image: url("../images/icon-back-black.png"); color:#000 !important;}
+
+.fl-theme-uio-wb button.fl-toggleButton.focus{ background-color:#000 !important; background-image:url("../images/icon-uio.png"); color:#fff !important;}
+.fl-theme-uio-wb .fls-loginout-link a:active{ background-color:#000 !important; background-image:url("../images/icon-login.png"); color:#fff !important;}
+.fl-theme-uio-wb .fls-back-link a:active{ background-color:#000 !important; background-image: url("../images/icon-back-white.png"); color:#fff !important;}
+
+.fl-theme-uio-by button.fl-toggleButton.focus{ background-color:#ff0 !important; background-image:url("../images/icon-uio-black.png"); color:#000 !important;}
+.fl-theme-uio-by .fls-loginout-link a:active{ background-color:#ff0 !important; background-image:url("../images/icon-login-black.png"); color:#000 !important;}
+.fl-theme-uio-by .fls-back-link a:active{ background-color:#ff0 !important; background-image: url("../images/icon-back-black.png"); color:#000 !important;}
+
+.fl-theme-uio-yb button.fl-toggleButton.focus{ background-color:#000 !important; background-image:url("../images/icon-uio-yellow.png"); color:#ff0 !important;}
+.fl-theme-uio-yb .fls-loginout-link a:active{ background-color:#000 !important; background-image:url("../images/icon-login-yellow.png"); color:#ff0 !important;}
+.fl-theme-uio-yb .fls-back-link a:active{ background-color:#000 !important; background-image: url("../images/icon-back-yellow.png"); color:#ff0 !important;}
+
+.fls-post-thumbnail a:active{
+ border:0;
+}
+a:active,
+a:active img,
+button:active {
+ border:2px solid #f00;
+}
+.fl-panelBar .fl-toggleButton{
+ font-size:1em;
+ margin-right:3%;
+ width:14em;
+}
+.fl-toggleButton.focus{
+ border-right:2px solid #f00;
+ border-bottom:2px solid #f00;
+ border-left:2px solid #f00;
+}
+.fls-masthead{
+ width:7em;
+}
+.fls-logo a,.single .fls-logo a{
+ display:block;
+}
+.home .fls-main,.archive .fls-main{
+ padding-top:3em;
+}
+.fl-grid li{
+ float:left;
+ min-height:21em;
+}
+.fl-grid li .fls-index-summary{
+ overflow:visible;
+}
View
171 wp-content/themes/fluid-studios/css/ie8.css
@@ -0,0 +1,171 @@
+/* IE8 specific styles
+--------------------------------------------------------------------------- */
+body{
+ max-width:70.625em; /* 1130 / 16 */
+ min-width:50em;
+ position:relative;
+}
+.flc-slidingPanel-toggleButton.fl-toggleButton{
+ background-color:#09c;
+ background-image:url("../images/icon-uio.png");
+ background-position: 0.4375em center;
+ background-repeat:no-repeat;
+ border:0 none;
+ border-radius:0 0 5px 5px;
+ color:#fff;
+ cursor:pointer;
+ display:block;
+ float:right;
+ font-family:Arial,sans-serif;
+ font-weight:normal;
+ line-height:150%;
+ margin-top:0;
+ margin-right:2%;
+ padding:0.15em 0.5em 0.15em 1.7em;
+ position:relative;
+ text-transform:lowercase;
+ width:auto;
+ z-index:999999;
+}
+.fls-theme button.fl-toggleButton:hover{
+ text-decoration:underline;
+}
+.fls-theme button.fl-toggleButton:focus{
+ outline:2px solid #f00;
+}
+.fls-banner{
+ border-bottom:0;
+ border-right:2px solid #fff;
+ margin:0;
+ min-height:100%;
+ padding:0;
+ position:absolute;
+ top:0;
+ bottom:0;
+ left:0;
+ width:27.256637%; /* 308 / 1130 */
+}
+.fls-masthead{
+ float:right;
+ padding:0 11.038961%; /* padding-right/left 34 / 308 */
+}
+.fls-logo,.single .fls-logo{
+ display:block;
+ margin:6em auto 1.25em; /*marging-top: 96 / 16, margin-bottom: 20 / 16 */
+}
+.fls-access ul,.single .fls-access ul{
+ margin:0;
+ padding:0;
+ width:auto;
+}
+.fls-access ul li.fls-loginout-link{
+ float:left;
+ margin-left:0;
+}
+.fls-loginout-link a{
+ background-position:0.5em center;
+ color:#fff !important;
+ display:inline-block;
+ float:none;
+ font-family:Arial,sans-serif;
+ line-height:150%;
+ margin:0;
+ overflow:visible;
+ padding:0.2em 0.75em 0.2em 1.5em;
+ position:relative;
+ text-transform:lowercase;
+ white-space:nowrap;
+ width:auto;
+}
+.fls-access ul li.fls-loginout-link,.single .fls-access ul li.fls-loginout-link{
+ float:none;
+ margin:0;
+ padding:0;
+}
+.fls-back-link a{
+ border-radius:5px 0 0 5px;
+ position:absolute;
+ top:22.8125em; /* 365 /16 */
+ right:0;
+}
+.fls-back-link a span{
+ display:none;
+}
+#uioProxyButton{
+ display:none;
+}
+.fls-main{
+ padding:1.625em 0 0 40.666667%; /* margin-top: 26 / 16, margin-left: 200 / 480 */
+}
+.single .fls-main{
+ font-size:1.2em;
+ padding-right:2%;
+}
+.fls-main,.home .fls-main,.single .fls-main,.archive .fls-main{
+ padding-left:27.25%; /* eyeballed */
+}
+.archive .fls-main,.single .fls-main{
+ padding-top:2.4375em;
+}
+.fls-main,.home .fls-main,.single .fls-main,.archive .fls-main,.error404 .fls-main{
+ padding-left:29.675153%; /* 338 / 1139 */
+}
+ul.fl-grid{
+ overflow:visible;
+}
+.fl-grid li{
+ display:inline-block;
+ padding:0 1%;
+ vertical-align:top;
+ width:30.5%;
+}
+.fl-grid li .fls-index-summary{
+ margin:0;
+ padding:0 1.5% 1.25em;
+}
+.fls-contentinfo{
+ text-align:left;
+}
+.home .fls-contentinfo,.archive .fls-contentinfo{
+ padding-left:30.553116%; /* 348 / 1139 */
+}
+.single .fls-contentinfo,.error404 .fls-contentinfo{
+ padding-left:29.675153%; /* 338 / 1139 */
+}
+
+
+
+.fl-theme-uio-bw .fl-toggleButton,.fl-theme-uio-wb .fl-toggleButton,.fl-theme-uio-by .fl-toggleButton,.fl-theme-uio-yb .fl-toggleButton{
+ background-position: 0.4375em center; border-radius:0;
+}
+.fl-theme-uio-bw .fls-loginout-link a,.fl-theme-uio-wb .fls-loginout-link a,.fl-theme-uio-by .fls-loginout-link a,.fl-theme-uio-yb .fls-loginout-link a{
+ background-position:0.6em center;
+}
+
+.fl-theme-uio-bw .fls-loginout-link a{
+ color:#fff !important;
+}
+.fl-theme-uio-bw .fls-loginout-link a:focus{
+ color:#000 !important;
+}
+
+.fl-theme-uio-wb .fls-loginout-link a{
+ color:#000 !important;
+}
+.fl-theme-uio-wb .fls-loginout-link a:focus{
+ color:#fff !important;
+}
+
+.fl-theme-uio-by .fls-loginout-link a{
+ color:#ff0 !important;
+}
+.fl-theme-uio-by .fls-loginout-link a:focus{
+ color:#000 !important;
+}
+
+.fl-theme-uio-yb .fls-loginout-link a{
+ color:#000 !important;
+}
+.fl-theme-uio-yb .fls-loginout-link a:focus{
+ color:#ff0 !important;
+}
View
12 wp-content/themes/fluid-studios/header.php
@@ -38,10 +38,12 @@
<link rel="stylesheet" type="text/css" href="<?php echo $template_url; ?>/infusion/components/uiOptions/css/FatPanelUIOptions.css" media="all" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="all" />
+<!--[if lte IE 8]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/ie8.css" type="text/css" media="screen" /><![endif]-->
+<!--[if lte IE 7]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/ie7.css" type="text/css" media="screen" /><![endif]-->
-<script src="<?php echo $template_url; ?>/infusion/MyInfusion.js"></script>
-<script src="<?php echo $template_url; ?>/js/fluid-studios.js"></script>
-<script src="<?php echo $template_url; ?>/js/modernizr.js"></script>
+<script type="text/javascript" src="<?php echo $template_url; ?>/infusion/MyInfusion.js"></script>
+<script type="text/javascript" src="<?php echo $template_url; ?>/js/fluid-studios.js"></script>
+<script type="text/javascript" src="<?php echo $template_url; ?>/js/modernizr.js"></script>
<title><?php if (function_exists('is_tag') && is_tag()) { single_tag_title("Entries tagged &quot;"); echo'&quot; &mdash; '; } elseif (is_archive()) { wp_title(''); echo ' Archive &mdash; '; } elseif (is_search()) { echo 'Search for &quot;'.esc_html($s).'&quot; &mdash; '; } elseif (!(is_404()) && (is_single()) || (is_page())) { wp_title(''); echo ' &mdash; '; } elseif (is_404()) { echo '404 Error &mdash; Page not found &mdash; '; } if (is_home()) { bloginfo('name'); echo ' &mdash; '; bloginfo('description'); } else { bloginfo('name'); } ?><?php if ($paged>1) { echo ' &mdash; page '. $paged; } ?></title>
@@ -70,7 +72,9 @@
<div class="fl-panelBar">
<button class="flc-slidingPanel-toggleButton fl-toggleButton">Show display preferences</button>
</div>
- </div>
+ </div>
+
+ <!--[if lte IE 7]><script type="text/javascript" src="<?php echo $template_url; ?>/js/iebuttonfocus.js"></script><![endif]-->
<script type="text/javascript">
// Instantiate the UI Enhancer component, specifying the table of contents' template URL
View
BIN  wp-content/themes/fluid-studios/images/logo-fluidSTUDIOS-green.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
50 wp-content/themes/fluid-studios/js/iebuttonfocus.js
@@ -0,0 +1,50 @@
+/*
+Copyright 2012 OCAD University
+Copyright 2012 Johnny Taylor
+
+Licensed under the Educational Community License (ECL), Version 2.0 or the New
+BSD license. You may not use this file except in compliance with one these
+Licenses.
+
+You may obtain a copy of the ECL 2.0 License and BSD License at
+https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
+*/
+
+// Declare dependencies
+/*global fluid, fs:true, jQuery*/
+
+// JSLint options
+/*jslint white: true, funcinvoke: true, undef: true, newcap: true, nomen: true, regexp: true, bitwise: true, browser: true, forin: true, maxerr: 100, indent: 4 */
+
+var fs = fs || {};
+
+(function () {
+ // create the "fs.ie7.slidingPanel" namespace
+ fluid.registerNamespace("fs.ie7.slidingPanel");
+
+ // new final init function to add the focus styling in IE7 to the toggle button
+ fs.ie7.slidingPanel.finalInit = function (that) {
+
+ var toggleButton = that.locate("toggleButton");
+
+ // add the ie7Focus style on focus of the toggle button
+ toggleButton.focus(function () {
+ toggleButton.addClass(that.options.styles.ie7Focus);
+ });
+
+ // remove the ie7Focus style on blur of the toggle button
+ toggleButton.blur(function () {
+ toggleButton.removeClass(that.options.styles.ie7Focus);
+ });
+ };
+
+ // demands block to add the ie7Focus style and override the finalInitFunction
+ fluid.demands("fluid.slidingPanel", ["fluid.uiOptions.fatPanel"], {
+ options: {
+ finalInitFunction: "fs.ie7.slidingPanel.finalInit",
+ styles: {
+ ie7Focus: "focus"
+ }
+ }
+ });
+})();
View
39 wp-content/themes/fluid-studios/style.css
@@ -1,10 +1,10 @@
/*
Theme Name:Fluid-Studios
Theme URI:http://studios.fluidproject.org/wp-content/themes/fluid-studios/
-Description:Usability and fls-accessibility on the open web...
+Description:Usability and accessibility on the open web...
Author:The Fluid Project
Author URI:http://fluidproject.org
-Version:2
+Version:2.0.2
*/
/* Style sheet contents
@@ -106,15 +106,12 @@ img,embed,object,video{
/* Fluid-Studios theme specific styles
--------------------------------------------------------------------------- */
html,body,.fls-wrapper{
- height:100%;
-}
-html{
- background-image:url("images/bg.jpg");
- background-repeat:repeat;
- font-family:"Neuton", "Times New Roman", Times, serif;
+ height:99.9999%; /* A hack to prevent page level scroll-bars from showing cos, of course, 100% is too much, but 99.9999 is just right. Go figure. */
}
body{
background:#fff;
+ background-image:url("images/bg.jpg");
+ background-repeat:repeat;
color: #333;
font-family: "Neuton", "Times New Roman", Times, serif;
font-size:100%;
@@ -138,7 +135,7 @@ h1,h2,h3,h4,h5,h6,ul,ol,dl,p,table,form,pre,figure{
color:#09C;
}
.single.fls-theme a{
- display:inline-block;
+ display:inline;
}
.fls-theme a:hover{
color:#CC0;
@@ -153,7 +150,7 @@ h1,h2,h3,h4,h5,h6,ul,ol,dl,p,table,form,pre,figure{
--------------------------------------------------------------------------- */
.no-js #myUIOptions,
.no-js .fl-uiOptions-fatPanel .fl-panelBar,
-.flc-slidingPanel-toggleButton.fl-toggleButton,
+.fl-panelBar .fl-toggleButton,
.no-js #uioProxyButton{
display:none;
}
@@ -179,12 +176,13 @@ h1,h2,h3,h4,h5,h6,ul,ol,dl,p,table,form,pre,figure{
margin:0 auto;
padding:0;
}
-.fls-logo {
+.fls-logo{
font-size:1em;
margin:1em auto;
width:99px;
}
-.fls-logo a {
+.fls-logo a,
+.single .fls-logo a{
background-repeat:no-repeat;
display:inline-block;
height:95px;
@@ -285,12 +283,8 @@ h1,h2,h3,h4,h5,h6,ul,ol,dl,p,table,form,pre,figure{
margin:0 auto;
padding:2em 4%;
}
-.flc-toc-tocContainer{
+.toc{
font-size:1.2em;
- line-height:140%;
-}
-.flc-toc-tocContainer a{
- display:inline-block;
}
.home,.archive{
color: #666666;
@@ -343,6 +337,9 @@ p.entry-meta,.home .entry-content p,.archive .entry-content p{
/* Styles for the index page grid (Overriding FSS styles)
----------------------------------------- */
+ul.fl-grid{
+ overflow:visible;
+}
.fl-grid li{
float:none;
height:auto;
@@ -567,7 +564,7 @@ p.entry-meta,.home .entry-content p,.archive .entry-content p{
}
@media screen and (min-width:620px){
- .flc-slidingPanel-toggleButton.fl-toggleButton{
+ .fl-panelBar .fl-toggleButton{
background-color:#09c;
background-image:url("images/icon-uio.png");
background-position: 0.4375em center;
@@ -719,8 +716,8 @@ p.entry-meta,.home .entry-content p,.archive .entry-content p{
}
@media screen and (min-width:800px){
- .flc-slidingPanel-toggleButton.fl-toggleButton{
- margin-right:2%;
+ .fl-panelBar .fl-toggleButton{
+ margin-right:2.75%;
}
.fls-banner,.home .fls-banner,.single .fls-banner,.archive .fls-banner{
width:27.256637%; /* 308 / 1130 */
@@ -734,7 +731,7 @@ p.entry-meta,.home .entry-content p,.archive .entry-content p{
width:30.5%;
}
.single .fls-main{
- padding-right:2% !important;
+ padding-right:3% !important;
}
.home .fls-contentinfo,.archive .fls-contentinfo{
padding-left:30.553116%; /* 348 / 1139 */
Something went wrong with that request. Please try again.