23 | 
26 | 
26 | 
31 | 
35 | 
39 | 
7 | 
23 | 
26 | 
42 | 
45 | 
48 | Hello!
55 |Welcome to Web Starter Kit.
56 | 57 |Get Started.
58 |Read how to Get Started or check out the Style Guide.
59 |
3 | 未处理
4 |
8 |
13 |
5 | 
6 |
7 |
6 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/app/styles/components/_components/_subsection-title.scss:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * subsection__title
4 | *
5 | **/
6 |
7 | .subsection-title {
8 | color: $colorGrayDark;
9 | margin-top: $lineHeight * 2;
10 | }
11 |
12 | .subsection-number {
13 | @include type--base;
14 | padding-top: 0;
15 | display: block;
16 | }
17 |
--------------------------------------------------------------------------------
/test/spec/test.js:
--------------------------------------------------------------------------------
1 | /* global describe, it */
2 |
3 | (function () {
4 | 'use strict';
5 |
6 | describe('Give it some context', function () {
7 | describe('maybe a bit more context here', function () {
8 | it('should run here few assertions', function () {
9 |
10 | });
11 | });
12 | });
13 | })();
14 |
--------------------------------------------------------------------------------
/app/views/pp_like_users.html:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
7 |
8 |
6 | 
24 |
6 | 
4 | " + data.data.content + ""; 42 | assembleDOM(data.data); 43 | } 44 | } else { 45 | alert('该文件不存在！'); 46 | router.run.call(router, '/u/'+ownerName+'/p/'+projectName+'/attachment'); 47 | } 48 | }); 49 | } 50 | 51 | function assembleDOM(json) { 52 | var data = { 53 | isText: fileType === 'md' || fileType === 'txt', 54 | fileType: fileType, 55 | file: json.file, 56 | content: json.content 57 | }; 58 | var rendered = Mustache.render($('#tPreview').html(), data); 59 | $('#tcontainer').append(rendered); 60 | } 61 | 62 | return { 63 | template_url: '/views/my_project_attachment_preview.html', 64 | context: ".container", 65 | before_enter: function(){ 66 | $('#navigator').find('.li-project').addClass('active'); 67 | $('#navigator').find(".li-project img").attr('src','/images/icons/project_active.png'); 68 | }, 69 | on_enter: function(user, project, parentId, fileId, type){ 70 | fileUrl = API_DOMAIN + '/api/user/' + user + '/project/' + project + '/files/' + fileId + '/view'; 71 | fileId = fileId; 72 | fileType = type; 73 | ownerName = user; 74 | projectName = project; 75 | 76 | showPreview(); 77 | }, 78 | on_exit: function(){ 79 | $('#navigator').find('li').removeClass('active'); 80 | $('#navigator').find(".li-project img").attr('src','/images/icons/project.png'); 81 | coding.showBanner(); 82 | } 83 | }; 84 | })(); 85 | -------------------------------------------------------------------------------- /app/styles/components/_themed.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Themed styles 4 | * 5 | **/ 6 | 7 | .themed { 8 | 9 | .theme--multi-device-layouts & { color: $colorLayouts; } 10 | 11 | .theme--introduction-to-media & { color: $colorMedia; } 12 | 13 | .theme--user-input & { color: $colorUser; } 14 | 15 | .theme--performance & { color: $colorPerformance; } 16 | 17 | } 18 | 19 | .themed--background { 20 | 21 | .theme--multi-device-layouts &, 22 | .theme--multi-device-layouts &.next-lessons::before { background-color: $colorLayouts; } 23 | 24 | .theme--introduction-to-media &, 25 | .theme--introduction-to-media &.next-lessons::before { background-color: $colorMedia; } 26 | 27 | .theme--user-input &, 28 | .theme--user-input &.next-lessons::before { background-color: $colorUser; } 29 | 30 | .theme--performance &, 31 | .theme--performance &.next-lessons::before { background-color: $colorPerformance; } 32 | 33 | } 34 | 35 | .themed--hover { 36 | 37 | .theme--multi-device-layouts &:hover { color: $colorLayouts; } 38 | 39 | .theme--introduction-to-media &:hover { color: $colorMedia; } 40 | 41 | .theme--user-input &:hover { color: $colorUser; } 42 | 43 | .theme--performance &:hover { color: $colorPerformance; } 44 | 45 | } 46 | 47 | .themed--hover-secondary { 48 | 49 | .theme--multi-device-layouts &:hover { color: $colorLayoutsSecondary; } 50 | 51 | .theme--introduction-to-media &:hover { color: $colorMediaSecondary; } 52 | 53 | .theme--user-input &:hover { color: $colorUserSecondary; } 54 | 55 | .theme--performance &:hover { color: $colorPerformanceSecondary; } 56 | 57 | } 58 | 59 | 60 | // Wrapped content in .article-container so we can 61 | // encapsulate what needs to be themed without overriding 62 | // anything outside of this container. 63 | .article-container h1, 64 | .article-container h2 { 65 | 66 | .article--multi-device-layouts & { color: $colorLayouts; } 67 | 68 | .article--introduction-to-media & { color: $colorMedia; } 69 | 70 | .article--user-input & { color: $colorUser; } 71 | 72 | .article--performance & { color: $colorPerformance; } 73 | } 74 | 75 | 76 | // Let's make sure this is at the end so we can override 77 | // previous rules. Specicifity rules. 78 | .themed--hover { 79 | 80 | .nav-theme--multi-device-layouts &:hover { color: $colorLayouts; } 81 | 82 | .nav-theme--introduction-to-media &:hover { color: $colorMedia; } 83 | 84 | .nav-theme--user-input &:hover { color: $colorUser; } 85 | 86 | .nav-theme--performance &:hover { color: $colorPerformance; } 87 | 88 | } 89 | 90 | .themed { 91 | 92 | .nav-theme--multi-device-layouts & { color: $colorLayouts; } 93 | 94 | .nav-theme--introduction-to-media & { color: $colorMedia; } 95 | 96 | .nav-theme--user-input & { color: $colorUser; } 97 | 98 | .nav-theme--performance & { color: $colorPerformance; } 99 | 100 | } 101 | 102 | .themed--background { 103 | 104 | .nav-theme--multi-device-layouts & { background-color: $colorLayouts; } 105 | 106 | .nav-theme--introduction-to-media & { background-color: $colorMedia; } 107 | 108 | .nav-theme--user-input & { background-color: $colorUser; } 109 | 110 | .nav-theme--performance & { background-color: $colorPerformance; } 111 | 112 | } 113 | -------------------------------------------------------------------------------- /app/styles/components/_components/_table.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Table 4 | * 5 | **/ 6 | 7 | table { 8 | margin-top: $lineHeight; 9 | width: 100%; 10 | 11 | thead { 12 | background: $colorBlue; 13 | color: #ffffff; 14 | } 15 | 16 | th { 17 | text-align: center; 18 | display: none; 19 | font-family: $fontHighlight; 20 | @include type--medium; 21 | } 22 | 23 | tr { 24 | @include medium { 25 | border-bottom: 1px solid #ffffff; 26 | } 27 | } 28 | 29 | tbody { 30 | background: $colorGrayBackground; 31 | } 32 | 33 | td { 34 | display: block; 35 | padding-top: $lineHeight/2; 36 | padding-bottom: $lineHeight/2; 37 | 38 | // This is to re-plicate the table-headers for mobile 39 | &::before { 40 | content: attr(data-th) " :"; 41 | display: inline-block; 42 | color: #ffffff; 43 | background: $colorBlue; 44 | border-right: 2px solid #ffffff; 45 | position: absolute; 46 | top: 0; 47 | left: 0; 48 | bottom: 0; 49 | width: 100px; 50 | max-height: 100%; 51 | font-family: $fontHighlight; 52 | font-size: 16px; 53 | font-weight: 400; 54 | padding-left: $lineHeight/2; 55 | padding-top: $lineHeight/2; 56 | 57 | @include medium { 58 | display: none; 59 | } 60 | } 61 | } 62 | 63 | th, 64 | td { 65 | position: relative; 66 | padding-left: 140px; 67 | 68 | @include medium { 69 | display: table-cell; 70 | } 71 | } 72 | 73 | th { 74 | @include medium { 75 | padding: $lineHeight; 76 | padding-top: 13px; 77 | padding-bottom: $lineHeight/2 - 1; 78 | } 79 | } 80 | 81 | td { 82 | @include medium { 83 | padding: $lineHeight; 84 | padding-bottom: $lineHeight - 1; 85 | } 86 | } 87 | } 88 | 89 | td:last-child::after { 90 | content: ""; 91 | display: block; 92 | background: #ffffff; 93 | height: 1px; 94 | left: 0; 95 | position: absolute; 96 | bottom: 0; 97 | width: 100%; 98 | @include medium { 99 | display: none; 100 | } 101 | } 102 | 103 | .table-2 { 104 | col { 105 | width: $mediumContainer / 2; 106 | @include wide { 107 | width: $wideContainer / 2; 108 | } 109 | } 110 | 111 | th, 112 | td { 113 | @include medium { 114 | &:first-child { 115 | border-right: 2px solid #ffffff; 116 | } 117 | } 118 | } 119 | } 120 | 121 | .table-3 { 122 | col { 123 | width: $mediumContainer / 3; 124 | @include wide { 125 | width: $wideContainer / 3; 126 | } 127 | } 128 | 129 | th, 130 | td { 131 | @include medium { 132 | &:nth-child(2) { 133 | border-left: 2px solid #ffffff; 134 | border-right: 2px solid #ffffff; 135 | } 136 | } 137 | } 138 | } 139 | 140 | .table-4 { 141 | col { 142 | width: $mediumContainer / 4; 143 | @include wide { 144 | width: $wideContainer / 4; 145 | } 146 | } 147 | 148 | th, 149 | td { 150 | @include medium { 151 | &:nth-child(2), 152 | &:nth-child(3) { 153 | border-left: 2px solid #ffffff; 154 | border-right: 2px solid #ffffff; 155 | } 156 | } 157 | } 158 | } 159 | -------------------------------------------------------------------------------- /app/styles/components/_components/_icons.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: icons; 3 | src: url(../images/icons/icons.eot); 4 | src: url(../images/icons/icons.eot?#iefix) format('embedded-opentype'), 5 | url(../images/icons/icons.woff2) format('woff2'), 6 | url(../images/icons/icons.woff) format('woff'), 7 | url(../images/icons/icons.ttf) format('truetype'), 8 | url(../images/icons/icons.svg?#icons) format('svg'); 9 | font-weight: normal; 10 | font-style: normal; 11 | } 12 | 13 | .icon { 14 | font-family: 'icons'; 15 | display: inline-block; 16 | vertical-align: top; 17 | line-height: 1; 18 | font-weight: normal; 19 | font-style: normal; 20 | speak: none; 21 | text-decoration: inherit; 22 | text-transform: none; 23 | text-rendering: optimizeLegibility; 24 | -webkit-font-smoothing: antialiased; 25 | -moz-osx-font-smoothing: grayscale; 26 | } 27 | 28 | // Icons 29 | $icon-bullet: '\e001'; 30 | .icon-bullet::before { 31 | content:"\e001"; 32 | } 33 | 34 | $icon-chevron-down: '\e002'; 35 | .icon-chevron-down::before { 36 | content: '\e002'; 37 | } 38 | 39 | $icon-chevron-large: '\e003'; 40 | .icon-chevron-large::before { 41 | content: '\e003'; 42 | } 43 | 44 | $icon-chevron-left: '\e004'; 45 | .icon-chevron-left::before { 46 | content: '\e004'; 47 | } 48 | 49 | $icon-chevron-right: '\e005'; 50 | .icon-chevron-right::before { 51 | content: '\e005'; 52 | } 53 | 54 | $icon-chevron-up: '\e006'; 55 | .icon-chevron-up::before { 56 | content: '\e006'; 57 | } 58 | 59 | $icon-close: '\e007'; 60 | .icon-close::before { 61 | content: '\e007'; 62 | } 63 | 64 | $icon-cog: '\e008'; 65 | .icon-cog::before { 66 | content: '\e008'; 67 | } 68 | 69 | $icon-diamond: '\e009'; 70 | .icon-diamond::before { 71 | content: '\e009'; 72 | } 73 | 74 | $icon-exclamation: '\e00a'; 75 | .icon-exclamation::before { 76 | content: '\e00a'; 77 | } 78 | 79 | $icon-google-dev: '\e00b'; 80 | .icon-google-dev::before { 81 | content: '\e00b'; 82 | } 83 | 84 | $icon-hash: '\e00c'; 85 | .icon-hash::before { 86 | content: '\e00c'; 87 | } 88 | 89 | $icon-introduction-to-media: '\e00d'; 90 | .icon-introduction-to-media::before { 91 | content: '\e00d'; 92 | } 93 | 94 | $icon-lessons: '\e00e'; 95 | .icon-lessons::before { 96 | content: '\e00e'; 97 | } 98 | 99 | $icon-menu: '\e00f'; 100 | .icon-menu::before { 101 | content: '\e00f'; 102 | } 103 | 104 | $icon-minus: '\e010'; 105 | .icon-minus::before { 106 | content: '\e010'; 107 | } 108 | 109 | $icon-multi-device-layouts: '\e011'; 110 | .icon-multi-device-layouts::before { 111 | content: '\e011'; 112 | } 113 | 114 | $icon-performance: '\e012'; 115 | .icon-performance::before { 116 | content: '\e012'; 117 | } 118 | 119 | $icon-plus: '\e013'; 120 | .icon-plus::before { 121 | content: '\e013'; 122 | } 123 | 124 | $icon-question: '\e014'; 125 | .icon-question::before { 126 | content: '\e014'; 127 | } 128 | 129 | $icon-slash: '\e015'; 130 | .icon-slash::before { 131 | content: '\e015'; 132 | } 133 | 134 | $icon-star: '\e016'; 135 | .icon-star::before { 136 | content: '\e016'; 137 | } 138 | 139 | $icon-tick: '\e017'; 140 | .icon-tick::before { 141 | content: '\e017'; 142 | } 143 | 144 | $icon-user-input: '\e018'; 145 | .icon-user-input::before { 146 | content: '\e018'; 147 | } 148 | -------------------------------------------------------------------------------- /app/index-web-starter-kit.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Welcome to Web Starter Kit.
56 | 57 |Read how to Get Started or check out the Style Guide.
59 |