Commit 8f087d20435ea646ac21dcf278249449f5a1e9de
1 parent
ec3a1b04b7
Exists in
master
and in
2 other branches
Theme + add bower fontawesome
Showing 8 changed files with 88 additions and 66 deletions Side-by-side Diff
app/bower_components/angular/.bower.json
app/images/t-shirt_icon/tship1.gif
1.09 KB
app/images/uniqlo_logo.png
5.04 KB
app/index.html
| ... | ... | @@ -12,6 +12,7 @@ |
| 12 | 12 | <!-- build:css styles/vendor.css --> |
| 13 | 13 | <!-- bower:css --> |
| 14 | 14 | <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> |
| 15 | + <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" /> | |
| 15 | 16 | <!-- endbower --> |
| 16 | 17 | <!-- endbuild --> |
| 17 | 18 | <!-- build:css({.tmp,app}) styles/main.css --> |
app/styles/main.css
| 1 | 1 | /* Space out content a bit */ |
| 2 | 2 | body { |
| 3 | - padding-top: 20px; | |
| 4 | - padding-bottom: 20px; | |
| 5 | -} | |
| 6 | 3 | |
| 7 | -/* Everything but the jumbotron gets side spacing for mobile first views */ | |
| 8 | -.header, | |
| 9 | -.marketing, | |
| 10 | -.footer { | |
| 11 | - padding-left: 15px; | |
| 12 | - padding-right: 15px; | |
| 13 | 4 | } |
| 14 | - | |
| 15 | -/* Custom page header */ | |
| 16 | -.header { | |
| 17 | - border-bottom: 1px solid #e5e5e5; | |
| 5 | +#tship-container{ | |
| 6 | + border-left: 1px solid #dcdcdc; | |
| 7 | + border-right: 1px solid #dcdcdc; | |
| 18 | 8 | } |
| 19 | -/* Make the masthead heading the same height as the navigation */ | |
| 20 | -.header h3 { | |
| 21 | - margin-top: 0; | |
| 22 | - margin-bottom: 0; | |
| 23 | - line-height: 40px; | |
| 24 | - padding-bottom: 19px; | |
| 9 | +/*HEADER*/ | |
| 10 | +header{ | |
| 11 | + border-bottom: 1px solid #dcdcdc; | |
| 25 | 12 | } |
| 26 | - | |
| 27 | -/* Custom page footer */ | |
| 28 | -.footer { | |
| 29 | - padding-top: 19px; | |
| 30 | - color: #777; | |
| 31 | - border-top: 1px solid #e5e5e5; | |
| 13 | +header .logo{ | |
| 14 | + color: #ed1d24; | |
| 15 | + font-size: 30px; | |
| 16 | + text-transform: uppercase; | |
| 17 | + font-weight: bold; | |
| 32 | 18 | } |
| 33 | - | |
| 34 | -/* Customize container */ | |
| 35 | -@media (min-width: 768px) { | |
| 36 | - .container { | |
| 37 | - max-width: 730px; | |
| 38 | - } | |
| 19 | +header .logo img{ | |
| 20 | + width: 60px; | |
| 39 | 21 | } |
| 40 | -.container-narrow > hr { | |
| 41 | - margin: 30px 0; | |
| 22 | +/*NAVIGATION*/ | |
| 23 | +nav{ | |
| 24 | + border-bottom: 1px solid #dcdcdc; | |
| 42 | 25 | } |
| 43 | - | |
| 44 | -/* Main marketing message and sign up button */ | |
| 45 | -.jumbotron { | |
| 46 | - text-align: center; | |
| 47 | - border-bottom: 1px solid #e5e5e5; | |
| 26 | +nav h2{ | |
| 27 | + font-size: 24px; | |
| 48 | 28 | } |
| 49 | -.jumbotron .btn { | |
| 50 | - font-size: 21px; | |
| 51 | - padding: 14px 24px; | |
| 29 | +nav ul{ | |
| 30 | + list-style: none; | |
| 31 | + padding-left: 0; | |
| 52 | 32 | } |
| 53 | - | |
| 54 | -/* Supporting marketing content */ | |
| 55 | -.marketing { | |
| 56 | - margin: 40px 0; | |
| 33 | +nav ul li{ | |
| 34 | + margin-left: 2px; | |
| 35 | + float: left; | |
| 36 | + padding: 6px 12px; | |
| 37 | + background-color: #999999; | |
| 57 | 38 | } |
| 58 | -.marketing p + h4 { | |
| 59 | - margin-top: 28px; | |
| 39 | +nav ul li a{ | |
| 40 | + color: #ffffff; | |
| 60 | 41 | } |
| 42 | +nav ul li.action{ | |
| 43 | + color: #ffffff; | |
| 44 | + background-color: #ed1d24; | |
| 45 | +} | |
| 46 | +/* Customize container */ | |
| 47 | +@media (min-width: 768px) { | |
| 48 | + .container { | |
| 49 | + /*max-width: 730px;*/ | |
| 50 | + } | |
| 51 | +} | |
| 61 | 52 | |
| 62 | 53 | /* Responsive: Portrait tablets and up */ |
| 63 | 54 | @media screen and (min-width: 768px) { |
| 64 | 55 | /* Remove the padding we set earlier */ |
| 65 | - .header, | |
| 66 | - .marketing, | |
| 67 | - .footer { | |
| 68 | - padding-left: 0; | |
| 69 | - padding-right: 0; | |
| 70 | - } | |
| 71 | - /* Space out the masthead */ | |
| 72 | - .header { | |
| 73 | - margin-bottom: 30px; | |
| 74 | - } | |
| 75 | - /* Remove the bottom border on the jumbotron for visual effect */ | |
| 76 | - .jumbotron { | |
| 77 | - border-bottom: 0; | |
| 78 | - } | |
| 56 | + | |
| 79 | 57 | } |
app/views/main.html
| 1 | -<h1 class="text-center"> | |
| 1 | +<div class="col-sm-10 col-sm-offset-1" id="tship-container"> | |
| 2 | + <header> | |
| 3 | + <div class="logo"> | |
| 4 | + <img src="images/uniqlo_logo.png" alt="Logo Uniqlo" /> | |
| 5 | + Uniqlo Customize | |
| 6 | + </div> | |
| 7 | + </header> | |
| 8 | + <nav class="clearfix"> | |
| 9 | + <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2> | |
| 10 | + <ul class="pull-right"> | |
| 11 | + <li><a href="#">商品に戻る</a></li> | |
| 12 | + <li><a href="#">加工方法に戻る</a></li> | |
| 13 | + <li class="action">デザインする</li> | |
| 14 | + </ul> | |
| 15 | + </nav> | |
| 16 | + <article> | |
| 17 | + <div class="row"> | |
| 18 | + <aside class="col-sm-5"> | |
| 19 | + <div class="step"> | |
| 20 | + <div class="title"> | |
| 21 | + 1. デザインを作る | |
| 22 | + </div> | |
| 23 | + <div class="step-box"> | |
| 24 | + <div class="tship-design"> | |
| 25 | + <div class="icon"> | |
| 26 | + <img src="images/t-shirt_icon/tship1.gif" alt="icon t-shirt" /> | |
| 27 | + </div> | |
| 28 | + <div class="name"> | |
| 29 | + 背中 (28x22) | |
| 30 | + </div> | |
| 31 | + <div class="action"> | |
| 32 | + <button class=""> | |
| 33 | + <i class="fa fa-caret-right" aria-hidden="true"></i> デザインを作る | |
| 34 | + </button> | |
| 35 | + </div> | |
| 36 | + </div> | |
| 37 | + </div> | |
| 38 | + </div> | |
| 39 | + </aside> | |
| 40 | + <section class="col-sm-7 tship-content"> | |
| 2 | 41 | |
| 3 | - OK | |
| 4 | -</h1> | |
| 42 | + </section> | |
| 43 | + </div> | |
| 44 | + </article> | |
| 45 | +</div> |
bower.json
| ... | ... | @@ -11,7 +11,8 @@ |
| 11 | 11 | "angular-resource": "1.2.11", |
| 12 | 12 | "angular-cookies": "~1.5.9", |
| 13 | 13 | "angular-sanitize": "1.2.11", |
| 14 | - "angular-route": "~1.5.9" | |
| 14 | + "angular-route": "~1.5.9", | |
| 15 | + "FortAwesome/Font-Awesome": "*" | |
| 15 | 16 | }, |
| 16 | 17 | "devDependencies": { |
| 17 | 18 | "angular-mocks": "1.2.11", |