Skip to content
This repository has been archived by the owner on Oct 4, 2023. It is now read-only.

Commit

Permalink
Visual design tweaks based on design sweep (#99)
Browse files Browse the repository at this point in the history 
* Change ‘Date & Time' to 'Date and time'
Fix: https://github.com/CanonicalLtd/snapweb-design/issues/56
* HR should be $color-mid-light on Settings
Fixes: https://github.com/CanonicalLtd/snapweb-design/issues/54
* Make active link menu font weight regular
Fixes: https://github.com/CanonicalLtd/snapweb-design/issues/53
* Add light strip to snap details template
Fixes: https://github.com/CanonicalLtd/snapweb-design/issues/52
* Remove font-weight bold from snap list view
Fixes: https://github.com/CanonicalLtd/snapweb-design/issues/50
* Add keyline to snaplist header
Fixes: https://github.com/CanonicalLtd/snapweb-design/issues/48
* Switch ‘Available’ for ‘Featured’ snaps
* Remove snap version from title
Fixes: https://github.com/CanonicalLtd/snapweb-design/issues/44
* Change button to base, instead of neutral
Fixes: https://github.com/CanonicalLtd/snapweb-design/issues/39
* Update default disk icon
Fixes: https://github.com/CanonicalLtd/snapweb-design/issues/43
* Navigation keylines should be $color-mid-light
* Card footer action top keyline should have right/left margins
* Truncate card meta desc with ellipsis
* Fix double underline on homepage CTA
Fixes: https://github.com/CanonicalLtd/snapweb-design/issues/37
* Nav links and icons should be $color-mid-dark
Fixes: https://github.com/CanonicalLtd/snapweb-design/issues/33
  • Loading branch information
@barrymcgee
barrymcgee authored and David Barth committed Nov 23, 2016
1 parent 2b9ded3 commit c0b74cd
Show file tree
Hide file tree
Showing 12 changed files with 97 additions and 69 deletions.
1 change: 0 additions & 1 deletion www/src/css/_patterns_card-deck.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@

&__title {
font-size: 1rem;
font-weight: bold;
padding-top: .5rem;
margin-bottom: .75rem;
}
Expand Down
20 changes: 16 additions & 4 deletions www/src/css/_patterns_card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@

.p-card {
margin: 0 .5rem .5rem;
border: $color-mid-light;
padding-bottom: 5rem;
position: relative;

&__title {

&:hover {
cursor: pointer;
text-decoration: underline;
}
}

Expand All @@ -18,14 +18,26 @@
display: block;
}

.p-list__item {
display: block; /* Fallback for non-webkit */
display: -webkit-box;
max-width: 100%;
max-height: 4.5rem;
margin: 0 auto;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}

&__footer {
border-top: 1px solid $color-mid-light;
margin-top: 1rem;
padding: 1rem;
margin: 1rem 1rem 0;
padding: 1rem 0;
position: absolute;
bottom: 0;
right: 0;
width: 100%;
width: calc(100% - 2rem);
}
}
}
2 changes: 1 addition & 1 deletion www/src/css/_patterns_lists.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@

&.is-active {
background-color: $color-light;
font-weight: bold;
font-weight: 400;
}
}
}
Expand Down
6 changes: 3 additions & 3 deletions www/src/css/_patterns_navigation.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

.p-navigation {
background: $color-x-light;
border-bottom: 1px solid $color-mid-dark;
border-bottom: 1px solid $color-mid-light;
color: $color-dark;
margin-bottom: 1rem;

Expand All @@ -17,8 +17,8 @@
&__links {

.p-navigation__link {
color: $color-dark;
border-left-color: $color-dark;
color: $color-mid-dark;
border-left-color: $color-mid-light;
padding-bottom: .75rem;

&:hover {
Expand Down
19 changes: 19 additions & 0 deletions www/src/css/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,3 +35,22 @@ $color-brand: #e95420;
padding-top: 1rem;
padding-bottom: 1rem;
}

// This has been proposed upstream to Vanilla Framework
// https://github.com/ubuntudesign/vanilla-framework/issues/710
hr {
border: 0;
height: 0;
border-top: 1px solid $color-mid-light;
margin: 2rem 0;
}

// Snaplist
.region-snaplist {

h2 {
border-bottom: 1px solid $color-mid-light;
padding-bottom: 1rem;
width: 100%;
}
}
38 changes: 13 additions & 25 deletions www/src/images/default-package-icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions www/src/js/templates/layout-banner.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@
</span>
<div class="p-navigation__links">
<a class="p-navigation__link {{#if isStoreActive }} active{{/if}}" href="/store">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 96 96.000001"><g transform="matrix(0 -.9996 -1 0 441.362 437.83)" color="#000"><path style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal" d="M429.997 437.362h-4v-10.21l-54.02-6v-55.79h4v52.21l6.003.667v-59.335l32.013-10.285v73.176l16.004 1.777v13.79zm-20.006-16.01v-67.244l-24.008 7.713v56.864l24.01 2.667z" font-family="sans-serif" white-space="normal" overflow="visible" solid-color="#000000" fill="gray"/><ellipse cx="-413.362" cy="-357.971" transform="matrix(0 -1 -1 0 0 0)" rx="8" ry="8.003" overflow="visible" fill="gray"/><ellipse ry="8.003" rx="8" transform="matrix(0 -1 -1 0 0 0)" cy="-357.971" cx="-373.362" overflow="visible" fill="gray"/></g></svg>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 96 96.000001"><g transform="matrix(0 -.9996 -1 0 441.362 437.83)" color="#333"><path style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#333;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal" d="M429.997 437.362h-4v-10.21l-54.02-6v-55.79h4v52.21l6.003.667v-59.335l32.013-10.285v73.176l16.004 1.777v13.79zm-20.006-16.01v-67.244l-24.008 7.713v56.864l24.01 2.667z" font-family="sans-serif" white-space="normal" overflow="visible" solid-color="#333333" fill="gray"/><ellipse cx="-413.362" cy="-357.971" transform="matrix(0 -1 -1 0 0 0)" rx="8" ry="8.003" overflow="visible" fill="gray"/><ellipse ry="8.003" rx="8" transform="matrix(0 -1 -1 0 0 0)" cy="-357.971" cx="-373.362" overflow="visible" fill="gray"/></g></svg>
<span class="anchor">Store</span>
</a>
<a class="p-navigation__link {{#if isSettingsActive }} active{{/if}}" href="/settings">
<svg class="icon" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" id="svg4874" height="24" viewBox="0 0 96 96.000001" width="24" version="1.1"><g id="layer1" transform="translate(67.857 -78.505)"><g id="g4845" transform="matrix(0 -1 -1 0 373.51 516.51)"><g id="g4778" transform="matrix(-.99960 0 0 1 575.94 -611)"><g id="g4780" transform="matrix(-1 0 0 1 576 611)"><rect id="rect4782" style="color:#000000" transform="scale(-1,1)" height="96" width="96.038" y="345.36" x="-438" fill="none"/><path id="path5417" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;font-variant-numeric:normal;shape-rendering:auto;solid-color:#000000;text-decoration-line:none;font-variant-position:normal;mix-blend-mode:normal;block-progression:tb;font-feature-settings:normal;shape-padding:0;font-variant-alternates:normal;text-indent:0;font-variant-caps:normal;image-rendering:auto;white-space:normal;text-decoration-style:solid;font-variant-ligatures:none;isolation:auto;text-transform:none" d="m371.94 362.17c17.198-9.916 39.261-3.9844 49.209 13.223 9.9478 17.207 4.0587 39.254-13.139 49.17s-39.261 3.9861-49.208-13.221c-9.9478-17.207-4.0597-39.255 13.138-49.171zm2.003 3.4646c-15.322 8.8344-20.543 28.371-11.676 43.709 8.8672 15.338 28.419 20.591 43.741 11.756 15.322-8.8344 20.543-28.371 11.676-43.709-8.8672-15.338-28.419-20.591-43.741-11.756z" fill="#808080"/><path id="path4168" style="color:#000000" d="m54.902 5.582l-13.804 2.0625v7.0975a34.033 33.971 43.145 0 1 13.804 0.028v-9.186-0.002zm-28.246 6.244l-10.517 8.942 5.181 6.175a34.033 33.971 43.145 0 1 10.58 -8.867l-5.244-6.25zm42.631 0.067l-5.207 6.207a34.033 33.971 43.145 0 1 0.895 0.474 34.033 33.971 43.145 0 1 9.673 8.406l5.272-6.281-10.633-8.806zm-60.889 22.115l-2.3105 13.611 7.9471 1.402a34.033 33.971 43.145 0 1 2.387 -13.597l-8.0236-1.416zm79.118 0.015l-7.987 1.409a34.033 33.971 43.145 0 1 2.432 13.588l8.039-1.416-2.484-13.581zm-71.758 24.622l-7.0881 4.093h-0.0019l6.98 11.91 7.018-4.05a34.033 33.971 43.145 0 1 -6.908 -11.953zm64.512 0.015a34.033 33.971 43.145 0 1 -2.805 6.371 34.033 33.971 43.145 0 1 -4.059 5.608l7.022 4.054 6.826-12-6.984-4.033zm-50.122 18.207l-2.804 7.703 13.004 4.639 2.757-7.58a34.033 33.971 43.145 0 1 -12.08 -4.195 34.033 33.971 43.145 0 1 -0.877 -0.567zm35.733 0.08a34.033 33.971 43.145 0 1 -12.979 4.707l2.782 7.639 12.941-4.807-2.744-7.539z" transform="matrix(0 -1 -1.0004 0 438 441.36)" fill="#808080"/><path id="ellipse4539" style="color-rendering:auto;text-decoration-color:#000000;color:#000000;font-variant-numeric:normal;shape-rendering:auto;solid-color:#000000;text-decoration-line:none;font-variant-position:normal;mix-blend-mode:normal;block-progression:tb;font-feature-settings:normal;shape-padding:0;font-variant-alternates:normal;text-indent:0;font-variant-caps:normal;image-rendering:auto;white-space:normal;text-decoration-style:solid;font-variant-ligatures:none;isolation:auto;text-transform:none" d="m377.95 372.56c11.464-6.6099 26.189-2.6521 32.819 8.8167 6.6303 11.469 2.7009 26.185-8.763 32.795-11.464 6.6099-26.191 2.6514-32.822-8.8174-6.6303-11.469-2.6983-26.184 8.7656-32.794zm2.002 3.463c-9.588 5.5283-12.85 17.732-7.3007 27.332 5.5497 9.5996 17.764 12.88 27.352 7.3518 9.588-5.5283 12.85-17.732 7.3007-27.332-5.5497-9.5996-17.764-12.88-27.352-7.3518z" fill="#808080"/></g></g></g></g></svg>
<svg class="icon" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" id="svg4874" height="24" viewBox="0 0 96 96.000001" width="24" version="1.1"><g id="layer1" transform="translate(67.857 -78.505)"><g id="g4845" transform="matrix(0 -1 -1 0 373.51 516.51)"><g id="g4778" transform="matrix(-.99960 0 0 1 575.94 -611)"><g id="g4780" transform="matrix(-1 0 0 1 576 611)"><rect id="rect4782" style="color:#333333" transform="scale(-1,1)" height="96" width="96.038" y="345.36" x="-438" fill="none"/><path id="path5417" style="color-rendering:auto;text-decoration-color:#333333;color:#333333;font-variant-numeric:normal;shape-rendering:auto;solid-color:#333333;text-decoration-line:none;font-variant-position:normal;mix-blend-mode:normal;block-progression:tb;font-feature-settings:normal;shape-padding:0;font-variant-alternates:normal;text-indent:0;font-variant-caps:normal;image-rendering:auto;white-space:normal;text-decoration-style:solid;font-variant-ligatures:none;isolation:auto;text-transform:none" d="m371.94 362.17c17.198-9.916 39.261-3.9844 49.209 13.223 9.9478 17.207 4.0587 39.254-13.139 49.17s-39.261 3.9861-49.208-13.221c-9.9478-17.207-4.0597-39.255 13.138-49.171zm2.003 3.4646c-15.322 8.8344-20.543 28.371-11.676 43.709 8.8672 15.338 28.419 20.591 43.741 11.756 15.322-8.8344 20.543-28.371 11.676-43.709-8.8672-15.338-28.419-20.591-43.741-11.756z" fill="#808080"/><path id="path4168" style="color:#333333" d="m54.902 5.582l-13.804 2.0625v7.0975a34.033 33.971 43.145 0 1 13.804 0.028v-9.186-0.002zm-28.246 6.244l-10.517 8.942 5.181 6.175a34.033 33.971 43.145 0 1 10.58 -8.867l-5.244-6.25zm42.631 0.067l-5.207 6.207a34.033 33.971 43.145 0 1 0.895 0.474 34.033 33.971 43.145 0 1 9.673 8.406l5.272-6.281-10.633-8.806zm-60.889 22.115l-2.3105 13.611 7.9471 1.402a34.033 33.971 43.145 0 1 2.387 -13.597l-8.0236-1.416zm79.118 0.015l-7.987 1.409a34.033 33.971 43.145 0 1 2.432 13.588l8.039-1.416-2.484-13.581zm-71.758 24.622l-7.0881 4.093h-0.0019l6.98 11.91 7.018-4.05a34.033 33.971 43.145 0 1 -6.908 -11.953zm64.512 0.015a34.033 33.971 43.145 0 1 -2.805 6.371 34.033 33.971 43.145 0 1 -4.059 5.608l7.022 4.054 6.826-12-6.984-4.033zm-50.122 18.207l-2.804 7.703 13.004 4.639 2.757-7.58a34.033 33.971 43.145 0 1 -12.08 -4.195 34.033 33.971 43.145 0 1 -0.877 -0.567zm35.733 0.08a34.033 33.971 43.145 0 1 -12.979 4.707l2.782 7.639 12.941-4.807-2.744-7.539z" transform="matrix(0 -1 -1.0004 0 438 441.36)" fill="#808080"/><path id="ellipse4539" style="color-rendering:auto;text-decoration-color:#333333;color:#333333;font-variant-numeric:normal;shape-rendering:auto;solid-color:#333333;text-decoration-line:none;font-variant-position:normal;mix-blend-mode:normal;block-progression:tb;font-feature-settings:normal;shape-padding:0;font-variant-alternates:normal;text-indent:0;font-variant-caps:normal;image-rendering:auto;white-space:normal;text-decoration-style:solid;font-variant-ligatures:none;isolation:auto;text-transform:none" d="m377.95 372.56c11.464-6.6099 26.189-2.6521 32.819 8.8167 6.6303 11.469 2.7009 26.185-8.763 32.795-11.464 6.6099-26.191 2.6514-32.822-8.8174-6.6303-11.469-2.6983-26.184 8.7656-32.794zm2.002 3.463c-9.588 5.5283-12.85 17.732-7.3007 27.332 5.5497 9.5996 17.764 12.88 27.352 7.3518 9.588-5.5283 12.85-17.732 7.3007-27.332-5.5497-9.5996-17.764-12.88-27.352-7.3518z" fill="#808080"/></g></g></g></g></svg>
<span class="anchor">Settings</span>
</a>
<a class="p-navigation__link" href="#">
Expand Down
2 changes: 1 addition & 1 deletion www/src/js/templates/settings-time.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="row">
<h2>Date &amp; time</h2>
<h2>Date and time</h2>
</div>
<div class="row">
<div class="col-2"><strong>Date</strong></div>
Expand Down
26 changes: 14 additions & 12 deletions www/src/js/templates/snap-layout.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
<div class="row">
<div class="col-2">
<div class="b-icon-wrapper">
<img class="b-icon" src="{{ icon }}" width="125" height="125">
<div class="p-strip--light">
<div class="row">
<div class="col-2">
<div class="b-icon-wrapper">
<img class="b-icon" src="{{ icon }}" width="125" height="125">
</div>
</div>
<div class="col-6">
<h1 class="b-snap__title">{{ name }}</h1>
<div class="b-snap__developer">{{ developer }}</div>
</div>
<div class="col-4">
{{> installer}}
</div>
</div>
</div>
<div class="col-6">
<h1 class="b-snap__title">{{ name }}</h1>
<div class="b-snap__developer">{{ developer }}</div>
</div>
<div class="col-4">
{{> installer}}
</div>
</div>

<div class="row">
Expand Down
27 changes: 15 additions & 12 deletions www/src/js/templates/snaplist-item.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,23 +13,26 @@

<h3 id="js-snap-title" class="p-card__title js-snap-title">{{ name }}</h3>

{{#unless addSnapItem}}
{{#if developer}}
<p class="p-card__content">By {{ developer }}</p>
{{/if}}
{{/unless}}
<ul class="p-list">
{{#unless addSnapItem}}
{{#if developer}}
<li class="p-list__item">By {{ developer }}</li>
{{/if}}
{{/unless}}

{{#if description}}
<li class="p-list__item">{{ description }}</li>
{{/if}}

{{#if prettyInstalledSize}}
<li class="p-list__item">{{ prettyInstalledSize }}</li>
{{/if}}
</ul>

{{#if description}}
<p class="p-card__content">{{ description }}</p>
{{/if}}
{{#if prettyInstalledSize}}
<p class="p-card__content">{{ prettyInstalledSize }}</p>
{{/if}}
<footer class="p-card__footer">
<div class="u-float--right">
{{> installer installerClass="button--positive"}}
</div>
</footer>

</a>

Loading

0 comments on commit c0b74cd

Please sign in to comment.