adventistchurch / alps Goto Github PK

headings with unordered or ordered lists as immediate siblings overlap in unpleasant ways. See http://316stage.com/en/ce-materials ("List of Available Topic" heading near the bottom) as an example, also a couple examples on this page http://316stage.com/en/for-authors.

A full width block would be something that would break out of the grid and be the full width of the browser window to allow a picture or colored background to break out of the grid. These work best in single column layouts.

Example:

Under .primary-nav, sub navigations (and their items and links) have the prefix .primary-nav__:

• <ul> with class .primary-nav__subnav
• <li> with class .primary-nav__subnav__list-item
• <a> with class .primary-nav__subnav__list-link

In the other hand, under .secondary-nav they have simple names, and consistent with BEM:

• <ul> with class .subnav__list
• <li> with class .subnav__list-item
• <a> with class .subnav__list-link

Is possible to update this to use class names like .secondary-nav? Personally, I think that this will simplify a lot the implementation of this design.

Nested selectors can be used to achieve the same effect like this :

• .primary-nav .subnav__list {...}
• .primary-nav .subnav__list-item {...}
• .primary-nav .subnav__list-link {...}

Thanks!

One thing that we didn't really take into account was breadcrumbs. This is something that has been requested as it is used on several sites currently. The ModX implementation currently being developed has put the breadcrumbs in the kicker of the header. (See attached)

I'd prefer to see them in the body section of white below that image.

I'm going to do a little research and will try to make a comp to work off.

We need a message alert box for cookie notifications.

Looks there is an issue with menu dropdown's z-index in Firefox (tested on OS X and Windows):

The header-church-no-logo organism currently uses an SVG for the logo. It would be nice if there was a variant of this organism that used the Adventist logo but had the church name as text with the proper font styles.

There is no way to provide an alternate spelling or wording for the pagination pattern.

Additionally, the arrows turned out backwards. If we can edit the words in the json file, we could switch the arrows.

The autogenerated comments are getting added too many times and in the wrong CSS files.
/* Autogenerated, do not edit. All changes will be undone. */ /* Mon Aug 15 2016 17:42:46 GMT-0400 (EDT) */

They need to be more limited in the scope they cover to just include the CDN files. Currently showing in styleguide-specific.css

Not sure the proper title for this, but here is the problem. The full-bleed hero's are great, when you can art direct the images and get really good photography. The challenge is that some of our sites don't have that option/ability. In talking with Clayton, that has been on of this biggest challenges with his clients in the building. One method he has done to address that can be seen on the dev Mission 360 TV site. It allows the user to upload a basic picture size, but then adds a CSS gradient out to a solid color on the sides. This way you still get the full-bleed visual, but with images that aren't full-bleed quality.

A few examples:

• http://m360.adventistmission.tv/stories
• http://m360.adventistmission.tv/schedule

Let's create an example pattern for layouts and one for grids, that would show how the styles work. Based on the discussion in #32

Matching styles from styleguide-custom.css are interfering with the ALPS main styles and should only be included in the Pattern Lab wrapper.

.column__primary sets a top padding, but in some scenarios it can get nested causing an extra padding.

Example:

In templates-microsite:

Then, in organisms-news-article-content:

And that causes this:

We need some responsive share/follow buttons that will be integrated with the design. Possible inclusion of the Ridiculously Responsive Social Sharing Buttons

The 2 column carousel has some issues at narrow widths. As you can see from the screenshot, the dots dissappear when the ratios are wrong and the description is long.

The dots should be still over the image till after they turn gray.

Pagination throughout the ALPS site is inconsistent on the placement. It is included currently in articles but not at the bottom of search results or the news channel.

We need to create a new grid option based on the two attached PNGs. This one will allow for a center column of text with images and pull quotes that can push to either said of the text.

The next template I would like to have would be a single page site template. I've mocked up a sample, attached below. I can see the following patterns that will be needed:

Grid:

• 70/30
• 30/70
• 50/50
• 33/34/33
• 100

Media:

• Full width media (image to be the full width of the white column)
• Browser width media (image to go edge-to-edge) (Low priority: not sure how easy or necessary this is.) Related: #3

Parallax:

• Pattern for adding a basic parallax effect to a full width image.

Text:

• Contact information (hcard micro-format)

Is it possible to add a show/hide option to the annotations? (Preferably not in the menu, but near the .sg-annotation-container?)

Rename news-channel-content to grid-2up-content

In talking with Tobias & Eduardo from Stimme, they raised the issue of the placement of the aside-nav on small screens. The challenge is that when it gets narrow, the menu, which tends to be used as a sub nav at times, ends up being half-way down the page. Something the did to meet that challenge on the HopeChannel website was to pull it out of line with Javascript and add another hamburger menu.

The menu that I would like to see moved up is the one in the sidebar here:

An example of how we have used this in practice is the site for our world General Conference Session site. As it worked out, since we were using the main and secondary navigation from Adventist.org, the only navigation available within the context of the microsite was the "news menu" and the sidebar. So the "news menu" became the primary navigation, and the sidebar became the secondary navigation on the site. (See the session site.)

All that is to say it would be nice to have it higher on the page for the narrow view.

This issue is being moved over from Trello

One idea proposed by @tpitre on the Trello board was to use flexbox order to reorder this on narrow views.

The placing of the horizontal lines in the content grid (http://alps.adventist.io/public/?p=organisms-grid-3up-content) makes the grid appear to be an irregular grid, when it is in fact a very neat, regular, well-aligned grid:

Would it perhaps make sense to tweak that so that all the lines aligned in a line?

Or, as Martin would put it, would it make sense to convert .with-divider to add a border-top to the container and a border-bottom to individual .gi .pad elements? This would remove the need for <hr> tags. A second class could be added to do equal height columns by putting the bottom-border on .gi.

Then it could look like the following example where all the content was luckily the same length.

In looking for a way to translate the footer information, there is no mustache templates for that pattern.

Should this gap between the story-block and footer exist? If don't, this can be solved by flexbox.

This is an interesting looking tool and might be helpful to improve accessibility in the pages we build.

tota11 - an accessibility visualization toolkit visualization toolkit

The simple pagination is a simplified version of the pagination molecule with just the current and total number of pages and simple next and previous buttons.

I'm noticing that the "View All" option shows the "HTML" and Annotations inside the iframe. Is that why you had "View All" turned off?

Is there a way to have "View All" just show the patterns and not the html for each item inside the frame, but still show it for the individual ones? Does this need to be done via CSS, @tpitre ?

Rename this to something in the "layout" family, like layout-2-column-70-30-split.

There is a bit of a question with the difference between the news article template and the article templates. Both are inside the microsite template but seem to be similar content. Can we rename article to news article - minimal since that is basically what it is?

The annotations.js file needs to be updated to reflect the reality of the patterns and templates.

Documentation: http://patternlab.io/docs/pattern-adding-annotations.html

Create a single column layout to add as a pattern.

Corousel not work properly for second item and so on.
Here the website dummy for that corousel: http://web.slapur.sch.id/photo-gallery/

Do I miss a corousel setting?

The tophat that is included in the header organism needs to be split out into it's own molecule. When it get separated, we need to also add a link on the logo in the tophat that links to Adventist.org.

• Create a new tophat molecule
• Add a link to Adventist.org on the logo in the molecule.

I pulled up the a version of the site, http://telltheworld.adventist.org, in BrowserStack and Windows 10. In Edge 14, it looks good, but in Explorer 11, I'm seeing the attached errors.

Additionally, I setup a test to run on the Homepage url in ALPS and also the one live site I have ATM. The results are here:

• ALPS Home: https://www.browserstack.com/screenshots/71d6bcbea737dabcf38d6bff3f805e811c6cd497
• Tell the World Home: https://www.browserstack.com/screenshots/4495373cb7cf57d55b6341ce3a0d6bb728da0503

I see some styleguide styles that are needed on "View All" pattern templates. Potentially find a way to conditionally include these files only for "View All" pages.

When there are more then one submenu items in a row, the down arrow on the menu to the left overlaps the surrounding space on the current menu item.

Can the arrow be tightened up (moved to the left) to make it fit closer?

We need to move the header logo options into a subgroup.

The single-page page is using a breakout-image-with-parallax molecule. When viewing the parallax image at narrow viewports the image shifts so much that the container is left empty which leaves a blank gap until the next content. The demo video should make this clearer.

This was the behavior at narrow viewports in all tested browsers.

It would be good to remove the theme switcher components from the shipping Pattern Lab files to reduce size and extra bits.

• the SCSS/CSS
• the JS
• the HTML

I've noticed a strange thing that is happening recently. I've been looking back through the commits to try and understand why it's happening, but can't figure it out.

On almost every page, the .sg-annotation-container is showing up and pushing everything down. Is there anything that can be done to correct this, @tpitre?

Everytime we deploy code on the ALPS server, it rebuilds the code in the CDN folder, leaving local changes on the server and making the deploybot deployment break.

See about removing the css command from grunt deploybot if it resolves the issue.

The CDN needs support for SSL.

Sometimes a lot of HTML code is repeated in some components. Here is a simple example:

<div class="article__meta">
  <span class="pub_date font--secondary--s gray can-be--white">{{ pub_date }}</span> <span class="divider">|</span>
  <span class="pub_region font--secondary--s gray can-be--white">{{ pub_region }}</span> <span class="divider">|</span>
  {{> molecules-byline }}
</div>

Questions:

1. Why is byline a molecule, but pub_date and pub_region are not? :

    <!-- Molecules/Text/Byline -->
    <span class="byline font--secondary--s gray can-be--white">{{ byline }}</span>

2. Shouldn't byline be an atom instead of a molecule?

In my opinion a molecule (or maybe better an atom) can be used for all of them. Here is an example of what I mean:


<!-- Molecule/Components/ArticleMeta -->
<div class="article__meta">
    {{> atom-meta-info(text: pub_date, type: 'pub_date', not_last: true) }}
    {{> atom-meta-info(text: pub_region, type: 'pub_region', not_last: true) }}
    {{> atom-meta-info(text: author, type: 'byline') }}
</div>

<!-- Atoms/Text/MetaInfo -->
{{# text }}
    <span class="{type} font--secondary--s gray can-be--white">{text}</span> 
    {{# not_last }} <span class="divider">|</span>{{/ not_last }}
{{/ text }}

In other cases, like in organisms-news-content, there is a lot of repeated code:


We are not going to take advantage of the patterns by having similar pieces of code spread all over the project. As it is now, if we need to to some changes (like removing a class in some titles), we need to modify several files or sections, and it's easy to forget stuff in the process.

The homepage of the ALPS system is missing the styleguide-custom.css files. It was getting loaded as part of the Pattern Lab styles, but we moved them out to core/styleguide/css/.... I attempted to move them back in but it didn't work very well.

Most of the patterns starting with news should be renamed to microsite, including organism > content > news content, and templates > news.

The language chooser looks a little odd with the icons both on the left. Should the globe icon be on the right?

We need a 3 column grid. I've experimented with doing a grid based on flexbox, allowing "media cards" to organize in a Z fashion.

When you use the "View All" option, the code shows only the first item. The code should be hidden on that view.

Links under .footer__legal-links are nearly invisibles when the cursor is over them.

Here is over "Legal Notice":

Looks like http://cdn.adventist.io/alps/2/images/icons/icon-search.svg is not available in the CDN.