su-sws / open_framework Goto Github PK
View Code? Open in Web Editor NEWOpen Framework Drupal Theme
Home Page: http://openframework.stanford.edu
License: GNU General Public License v2.0
Open Framework Drupal Theme
Home Page: http://openframework.stanford.edu
License: GNU General Public License v2.0
Open Framework Theme for Drupal 7.x ##### Version:7.x-2.8-dev Authors/Maintainers: Brian Young, Megan Erin Miller, Joseph Knox -- SUMMARY -- Open Framework is a new Drupal theme that builds off of Twitter Bootstrap and provides a simple yet powerful way to create complex responsive layouts. For more information, visit http://openframework.stanford.edu -- REQUIREMENTS -- The Open Framework theme is intended for Drupal version 7 only; it will not work with Drupal 6 or below. -- INSTALLATION -- Download and extract the theme package in your sites/all/themes directory. As an admin, go to Administration > Appearance to enable the theme. -- TROUBLESHOOTING -- If you encounter an issue while using this theme, please post it as a bug or feature request on GitHub issues: http://github.com/SU-SWS/open_framework/issues
The icon shows up in views blocks but not views pages.
See the Research Highlights section on https://sites.stanford.edu/physics/
The div class="row" and div class="span3" relationship only works when they are nested immediately together.
Currently there is a div class="view-content" set in-between div class="row" and div class="span3", causing the blocks to not display properly in the mobile views.
Need a "panels package" that can provide responsive region behaviors to panels regions.
Try out fittext.js to make site titles adjust to fit the width of the screen.
Ryan says fittext.js does not play nice with Twitter Bootstrap so we will want to test this.
Or create a package of Display Suite template files that have responsive support.
For example if you place a block in a 3-col-flow region, by default it is given a span4. If you wanted your block to have a span8 on it instead, span8 does not override the span4 because of the order of the CSS code.
We want people to be able to use span overrides, so need to figure out a way to do this.
Create CSS classes for the different image types like header images, article images, sidebar images, and content images.
See STS sidebar
Need video to re-size to fit column at break points. it is OK to be small, as on mobile, the video will popup full screen.
container expects img width=100%
The current implementation of using custom logos as the site title requires unchecking the "site title" at admin/build/themes/settings. This causes the site title not to be output in the HTML of the page, which presents a usability and accessibility issue.
Suggested solution: output the site title as in Stanford Modern, but hide with CSS, e.g.,:
<div id="site">
<div id="name">
<a href="/">Awesome Site Name</a>
</div>
</div>
make them a color?
Information like "Administrative Organization - admin - 2012-03-06 13:25 - 0 attachments" is appearing in the Drupal search results.
Right now it shows up first, before the content. At the moment, I have put .hidden-mobile on the well I put on Breakfast Briefings, as it is just an image and added for purely design purposes, so it just hides for mobile, but we need a more sustainable and flexible solution for handling important content placed in first sidebar.
It is staying down at the bottom with the sticky footer, when it really should float up and stay connected with the content – see this short page as example:
https://feminist.stanford.edu/graduate-students
The D7 theme is outputting breadcrumbs with no styling. These should either be styled or removed (even better would be styled, plus a theme option to disable them!) :)
I don't think the D6 theme printed the breadcrumbs.
Usually a sub-nav block is in the first sidebar. We want this menu to be handled in a way that is similar to the main menu perhaps.
This is happening because the column width is set to 33% but then each column, except the last, has a padding-right of 20px, which re-sizes the content inside.
One solution is to add back the 20px padding on the last column (easy fix), but this creates perhaps too large of a gap to the right of the body content area.
Not sure, without adjusting the overall width of the table itself, or the body content area how to avoid the extra space between the grid and the sidebar..
When you use H2 or H3 in a view, somehow we want the first row to have no margin-top, so we can take advantage of the block margins instead.
Solution: target first row in view?
Provide option to display logo image in mobile view. This gets tricky for sites with large logo/banner images. Perhaps provide theme options to accommodate the different logo image sizes.
Arcing of sidebar links - see last link on https://sites.stanford.edu/csfgs/events
Feedback from Sean Keegan:
In general the OAA menu implementation is probably the best option (with a few caveats). I like the Simply Accessible menu the best as it supports an intuitive interaction model (i.e., just using the arrow keys), but the problem I encountered is that it seemed to fail on the Mac platform with respect to screen-reader accessibility both with VoiceOver and Chrome+ChromeVox. Like the author, though, I was only able to test in Snow Leopard...I have no test info for Lion at this time.
So, if I had to suggest one implementation, it would be the OAA Menubar model as these tended to work best on the Mac platform and do work for the Windows screen-readers as well.
The only big drawback on the OAA menubar model is that it tends to rely on some relatively newer coding, which could be an issue for individuals with older browsers. It is identified as compliant with browsers as far back as Safari 5, FF3.6 and IE 8, so it's not that big an issue...but if someone is still rockin' IE 5.5, then there are no guarantees.
If you get a sample page implemented, drop me a line and I should have time to give it a test with a screen-reader.
see https://sites.stanford.edu/sts/stanford-events-calendar/2012-07-29 for example.
I can't figure out how to fix this.
It is OK in Firefox, not OK in Chrome.
Need to override the following default settings or get rid of them:
.field .field-label {
font-size: 1.4em;
margin: .5em 0;
padding-bottom: 3px;
letter-spacing: 2px;
font-weight: normal;
}
Found in stanford_basic.css line 629
there is too much
https://github.com/SU-SWS/open_framework/blob/6.x-1.x/templates/page.tpl.php#L2
The lang attribute is declared twice, causing HTML validation to fail.
it currently looks like a button.
.breadcrumb
See https://sites.stanford.edu/physics/events/physics-alumni-reception When you resize the browser window, it's only scaling in one dimension.
Adding img {height: auto} will resolve the responsive scaling issue.
Content blocks are extending beyond content sections and covering sidebar content.
jQuery 1.7.1 has conflicts with the Drupal 6 blocks layout page as well as the Stanford course import module.
In template.php, region_has_block() doesn't seem to respect whether a user has permission to actually see a block in a region. For example, if you add a block to the right sidebar, but make it visible to just authenticated users, it'll return 1 for anonymous users as well, even though it should return 0.
How about we use count(block_list($region)) instead?
The "edit block" links rock, but after you save the block, it takes you to admin/build/block. It would be great to add a "?destination=<currentpath>" parameter to the $edit_links variable, so that the user is returned to the page where they were before editing the block.
(I will try to offer a patch for this.)
https://sites.stanford.edu/physics/resources/forms and https://sites.stanford.edu/physics/research are Views that use the "Grid" display style. This style uses tables to output content in a grid format; these tables overflow into the fat footer area at certain break points in the responsive design.
Can you revisit the default assignment of the .span12 and .clear-block classes for CCK fields? On CCK nodes with many fields, it makes it difficult to reposition them using solely CSS.
Ref: https://sites.stanford.edu/physics/people/faculty/robert-b-laughlin
The slideshow images do not resize properly in mobile view.
do this a different way? use border-box? or calc()?
reset all margins = 0 and not use left-margin to add spacing?
This is related to adding equal width gutters between all elements no matter how many are in a region.
We should add some default images to the base theme so they are available for features development and default views.
D7 adds "action links" as a UX enhancement, which gets output as a ul.action-links. This renders by default with the same styling as any normal ul, but should have some styling implying action.
If empty, should not add wrapper.
add to print CSS
e.g. Table views not printing well. Need to add borders or row differentiation
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.