Skip to content

Commit 5f5abc5

Browse files
author
Jihye Hong
authored
Merge pull request w3c#51 from jihyerish/spatnav-blog-demo
Spatnav blog demo
2 parents 34aed66 + 7ba0804 commit 5f5abc5

File tree

16 files changed

+464
-5
lines changed

16 files changed

+464
-5
lines changed

‎demo/blog/blog-style.css‎

Lines changed: 228 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
1+
@font-face {
2+
font-family: 'Roboto';
3+
font-style: normal;
4+
font-weight: 400;
5+
src: url(https://themes.googleusercontent.com/static/fonts/roboto/v11/2UX7WLTfW3W8TclTUvlFyQ.woff)
6+
}
7+
body {
8+
font-family: 'Roboto';
9+
height: 100%;
10+
width: 100%;
11+
}
12+
13+
a {
14+
color: inherit;
15+
text-decoration: none; /* no underline */
16+
}
17+
18+
a:hover {
19+
color: inherit;
20+
font-weight: bold;
21+
text-decoration: none; /* no underline */
22+
}
23+
24+
a:focus {
25+
outline: 0px solid white;
26+
font-weight: bold;
27+
}
28+
29+
.menulink {
30+
display: block;
31+
width: 100%;
32+
height: 100%;
33+
font-size: 1.2rem;
34+
}
35+
36+
.menulink:focus {
37+
outline: 0px solid black;
38+
box-shadow: -5px 0px 0px 0px black, 5px 0px 0px 0px black;
39+
}
40+
41+
.menulink:after {
42+
background: rgb(160, 182, 219);
43+
content: '';
44+
display: block;
45+
height: 2px;
46+
margin: 5px;
47+
}
48+
49+
.tabcontent {
50+
display: none;
51+
}
52+
53+
.text-center {
54+
text-align:center!important;
55+
}
56+
57+
.text-title {
58+
font-size: 1.6rem;
59+
}
60+
61+
.text-menu {
62+
padding: 20px 0;
63+
}
64+
65+
.blog {
66+
display:flex;
67+
flex-direction: row;
68+
justify-content: center;
69+
}
70+
71+
.sampleFrame {
72+
width: 100%;
73+
height: 1200px;
74+
}
75+
76+
.col-sm-3{
77+
flex: 25%;
78+
max-width:25%;
79+
padding: 0 5px;
80+
background-color: rgb(216, 238, 255);
81+
}
82+
83+
.col-sm-9{
84+
flex: 75%;
85+
max-width:75%;
86+
padding: 0 5px;
87+
}
88+
89+
.gridrow {
90+
display: flex;
91+
flex-wrap: wrap;
92+
padding: 0 4px;
93+
}
94+
95+
/* Create four equal columns that sits next to each other */
96+
.gridcolumn {
97+
flex: 25%;
98+
max-width: 25%;
99+
padding: 0 4px;
100+
}
101+
102+
.gridcolumn img {
103+
vertical-align: middle;
104+
}
105+
106+
.mr-5,.mx-5{margin-right:3rem!important}
107+
.mb-5,.my-5{margin-bottom:3rem!important}
108+
.ml-5,.mx-5{margin-left:3rem!important}
109+
.mt-5,.my-5{margin-top:3rem!important}
110+
111+
.mr-4,.mx-4{margin-right:1.5rem!important}
112+
.mb-4,.my-4{margin-bottom:1.5rem!important}
113+
.ml-4,.mx-4{margin-left:1.5rem!important}
114+
.mt-4,.my-4{margin-top:1.5rem!important}
115+
116+
.card {
117+
position:relative;
118+
display:flex;
119+
flex-direction:column;
120+
min-width:0;
121+
word-wrap:break-word;
122+
background-color:#fff;
123+
background-clip:border-box;
124+
border:1px solid rgba(0,0,0,.125);
125+
border-radius:.25rem
126+
}
127+
.card>hr {
128+
margin-right:0;
129+
margin-left:0;
130+
}
131+
.card>.list-group:first-child.list-group-item:first-child {
132+
border-top-left-radius:.25rem;
133+
border-top-right-radius:.25rem;
134+
}
135+
.card>.list-group:last-child.list-group-item:last-child {
136+
border-bottom-right-radius:.25rem;
137+
border-bottom-left-radius:.25rem;
138+
}
139+
.card-body {
140+
flex:1 1 auto;
141+
padding:1.25rem;
142+
}
143+
.card-text:last-child {
144+
margin-bottom:0;
145+
}
146+
147+
.card-img {
148+
width:100%;
149+
border-radius:calc(.25rem - 1px);
150+
}
151+
.card-img-top {
152+
width:100%;
153+
border-top-left-radius:calc(.25rem - 1px);
154+
border-top-right-radius:calc(.25rem - 1px);
155+
}
156+
157+
.card-img-top:focus {
158+
outline: 5px solid #428bca;
159+
}
160+
161+
.btn {
162+
display:inline-block;
163+
font-weight:400;
164+
text-align:center;
165+
white-space:nowrap;
166+
vertical-align:middle;
167+
-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
168+
border:1px solid transparent;
169+
padding:.375rem .75rem;
170+
font-size:1rem;
171+
font-family: 'Roboto';
172+
line-height:1.5;
173+
border-radius:.25rem;
174+
transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
175+
}
176+
.btn:focus,.btn:hover {text-decoration:none}
177+
.btn.focus,.btn:focus {outline: 0; box-shadow:0 0 0 .2rem rgba(0,253,255,.25)}
178+
179+
.btn-sm {
180+
padding:.25rem .5rem;
181+
font-size:.875rem;
182+
line-height:1.5;
183+
border-radius:.2rem
184+
}
185+
.btn-outline-secondary {
186+
color:#6c757d;
187+
background-color:transparent;
188+
background-image:none;
189+
border-color:#6c757d;
190+
}
191+
.btn-outline-secondary:hover {color:#fff;background-color:#6c757d;border-color:#6c757d}
192+
.btn-outline-secondary:focus {box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}
193+
194+
.btn-group {position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}
195+
.btn-group>.btn{position:relative;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto}
196+
.btn-group>.btn:hover{z-index:1}
197+
.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus{z-index:1}
198+
.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group,.btn-group-vertical .btn+.btn,.btn-group-vertical .btn+.btn-group,.btn-group-vertical .btn-group+.btn,.btn-group-vertical .btn-group+.btn-group{margin-left:-1px}
199+
200+
.btn-group>.btn:first-child{margin-left:0}
201+
.btn-group>.btn-group:not(:last-child)>.btn,.btn-group>.btn:not(:last-child):not(.dropdown-toggle){
202+
border-top-right-radius:0;
203+
border-bottom-right-radius:0;
204+
}
205+
.btn-group>.btn-group:not(:first-child)>.btn,.btn-group>.btn:not(:first-child){
206+
border-top-left-radius:0;
207+
border-bottom-left-radius:0;
208+
}
209+
210+
:focus {
211+
outline: 5px solid #428bca;
212+
}
213+
214+
/* Responsive layout - makes a two column-layout instead of four columns */
215+
@media (max-width: 800px) {
216+
.gridcolumn {
217+
flex: 50%;
218+
max-width: 50%;
219+
}
220+
}
221+
222+
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
223+
@media (max-width: 600px) {
224+
.gridcolumn {
225+
flex: 100%;
226+
max-width: 100%;
227+
}
228+
}

‎demo/blog/blog-utils.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/* JS Lib for Blog Demo
2+
*
3+
* Copyright 2018 LG Electronics Inc. All rights reserved.
4+
*
5+
*/
6+
window.addEventListener("load", function() {
7+
// load SpatNav polyfill
8+
focusNavigationHeuristics();
9+
});
10+
11+
function swapTabContents(evt, tabName) {
12+
// Declare all variables
13+
var i, tabcontent, tablink;
14+
15+
// Get all elements with class="tabcontent" and hide them
16+
tabcontent = document.getElementsByClassName("tabcontent");
17+
for (i = 0; i < tabcontent.length; i++) {
18+
tabcontent[i].style.display = "none";
19+
20+
}
21+
22+
// Get all elements with class="tablink" and remove the class "active"
23+
tablink = document.getElementsByClassName("tablink");
24+
for (i = 0; i < tablink.length; i++) {
25+
tablink[i].children[0].style.fontWeight = "";
26+
}
27+
28+
// Show the current tab, and add an "active" class to the button that opened the tab
29+
document.getElementById(tabName).style.display = "block";
30+
}

‎demo/blog/images/feed/1.jpg‎

44.9 KB
Loading

‎demo/blog/images/feed/10.jpg‎

77.2 KB
Loading

‎demo/blog/images/feed/11.jpg‎

60.3 KB
Loading

‎demo/blog/images/feed/2.jpg‎

80.1 KB
Loading

‎demo/blog/images/feed/3.jpg‎

38.8 KB
Loading

‎demo/blog/images/feed/4.jpg‎

49.2 KB
Loading

‎demo/blog/images/feed/5.jpg‎

50.1 KB
Loading

‎demo/blog/images/feed/6.jpg‎

56.2 KB
Loading

0 commit comments

Comments
 (0)