Skip to Content

Changes for page Academy

Last modified by Erik Bakker on 2024/09/24 16:12
From version 28.1
edited by Erik Bakker
on 2022/04/21 15:44
Change comment: Added object
To version 37.1
edited by Erik Bakker
on 2022/04/21 15:54
Change comment: Added object

Summary

Details

XWiki.GadgetClass[1]
content
... ... @@ -1,198 +1,113 @@
1 -{{code}}
2 -@import url('https://fonts.googleapis.com/css?family=Heebo:400,700|Open+Sans:400,700');
3 -
4 -:root {
5 - --color: #3c3163;
6 - --transition-time: 0.5s;
7 -}
8 -
1 +{{html}}
2 +<!DOCTYPE html>
3 +<html>
4 +<head>
5 +<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
6 +<style>
9 9  * {
10 10   box-sizing: border-box;
11 11  }
12 12  
13 -body {
14 - margin: 0;
15 - min-height: 100vh;
16 - font-family: 'Open Sans';
17 - background: #fafafa;
11 +/* Create two equal columns that floats next to each other */
12 +.column {
13 + float: left;
14 + width: 50%;
15 + padding: 10px;
18 18  }
19 19  
20 -a {
21 - color: inherit;
18 +/* Clear floats after the columns */
19 +.row:after {
20 + content: "";
21 + display: table;
22 + clear: both;
22 22  }
23 -
24 -.cards-wrapper {
25 - display: grid;
26 - justify-content: center;
27 - align-items: center;
28 - grid-template-columns: 1fr 1fr 1fr;
29 - grid-gap: 4rem;
30 - padding: 4rem;
31 - margin: 0 auto;
32 - width: max-content;
24 +/* Style the buttons */
25 +.btn {
26 + border: none;
27 + outline: none;
28 + padding: 12px 16px;
29 + background-color: #f1f1f1;
30 + cursor: pointer;
33 33  }
34 34  
35 -.card {
36 - font-family: 'Heebo';
37 - --bg-filter-opacity: 0.5;
38 - background-image: linear-gradient(rgba(0,0,0,var(--bg-filter-opacity)),rgba(0,0,0,var(--bg-filter-opacity))), var(--bg-img);
39 - height: 20em;
40 - width: 15em;
41 - font-size: 1.5em;
42 - color: white;
43 - border-radius: 1em;
44 - padding: 1em;
45 - /*margin: 2em;*/
46 - display: flex;
47 - align-items: flex-end;
48 - background-size: cover;
49 - background-position: center;
50 - box-shadow: 0 0 5em -1em black;
51 - transition: all, var(--transition-time);
52 - position: relative;
53 - overflow: hidden;
54 - border: 10px solid #ccc;
55 - text-decoration: none;
33 +.btn:hover {
34 + background-color: #ddd;
56 56  }
57 57  
58 -.card:hover {
59 - transform: rotate(0);
60 -}
61 -
62 -.card h1 {
63 - margin: 0;
64 - font-size: 1.5em;
65 - line-height: 1.2em;
66 -}
67 -
68 -.card p {
69 - font-size: 0.75em;
70 - font-family: 'Open Sans';
71 - margin-top: 0.5em;
72 - line-height: 2em;
73 -}
74 -
75 -.card .tags {
76 - display: flex;
77 -}
78 -
79 -.card .tags .tag {
80 - font-size: 0.75em;
81 - background: rgba(255,255,255,0.5);
82 - border-radius: 0.3rem;
83 - padding: 0 0.5em;
84 - margin-right: 0.5em;
85 - line-height: 1.5em;
86 - transition: all, var(--transition-time);
87 -}
88 -
89 -.card:hover .tags .tag {
90 - background: var(--color);
37 +.btn.active {
38 + background-color: #666;
91 91   color: white;
92 92  }
41 +</style>
42 +</head>
43 +<body>
93 93  
94 -.card .date {
95 - position: absolute;
96 - top: 0;
97 - right: 0;
98 - font-size: 0.75em;
99 - padding: 1em;
100 - line-height: 1em;
101 - opacity: .8;
102 -}
45 +<h2>List View or Grid View</h2>
103 103  
104 -.card:before, .card:after {
105 - content: '';
106 - transform: scale(0);
107 - transform-origin: top left;
108 - border-radius: 50%;
109 - position: absolute;
110 - left: -50%;
111 - top: -50%;
112 - z-index: -5;
113 - transition: all, var(--transition-time);
114 - transition-timing-function: ease-in-out;
115 -}
47 +<p>Click on a button to choose list view or grid view.</p>
116 116  
117 -.card:before {
118 - background: #ddd;
119 - width: 250%;
120 - height: 250%;
121 -}
49 +<div id="btnContainer">
50 + <button class="btn" onclick="listView()"><i class="fa fa-bars"></i> List</button>
51 + <button class="btn active" onclick="gridView()"><i class="fa fa-th-large"></i> Grid</button>
52 +</div>
53 +<br>
122 122  
123 -.card:after {
124 - background: white;
125 - width: 200%;
126 - height: 200%;
127 -}
55 +<div class="row">
56 + <div class="column" style="background-color:#aaa;">
57 + <h2>Column 1</h2>
58 + <p>Some text..</p>
59 + </div>
60 + <div class="column" style="background-color:#bbb;">
61 + <h2>Column 2</h2>
62 + <p>Some text..</p>
63 + </div>
64 +</div>
128 128  
129 -.card:hover {
130 - color: var(--color);
131 -}
66 +<div class="row">
67 + <div class="column" style="background-color:#ccc;">
68 + <h2>Column 3</h2>
69 + <p>Some text..</p>
70 + </div>
71 + <div class="column" style="background-color:#ddd;">
72 + <h2>Column 4</h2>
73 + <p>Some text..</p>
74 + </div>
75 +</div>
132 132  
133 -.card:hover:before, .card:hover:after {
134 - transform: scale(1);
135 -}
77 +<script>
78 +// Get the elements with class="column"
79 +var elements = document.getElementsByClassName("column");
136 136  
137 -.card-grid-space .num {
138 - font-size: 3em;
139 - margin-bottom: 1.2rem;
140 - margin-left: 1rem;
141 -}
81 +// Declare a loop variable
82 +var i;
142 142  
143 -.info {
144 - font-size: 1.2em;
145 - display: flex;
146 - padding: 1em 3em;
147 - height: 3em;
148 -}
149 -
150 -.info img {
151 - height: 3em;
152 - margin-right: 0.5em;
153 -}
154 -
155 -.info h1 {
156 - font-size: 1em;
157 - font-weight: normal;
158 -}
159 -
160 -/* MEDIA QUERIES */
161 -@media screen and (max-width: 1285px) {
162 - .cards-wrapper {
163 - grid-template-columns: 1fr 1fr;
84 +// List View
85 +function listView() {
86 + for (i = 0; i < elements.length; i++) {
87 + elements[i].style.width = "100%";
164 164   }
165 165  }
166 166  
167 -@media screen and (max-width: 900px) {
168 - .cards-wrapper {
169 - grid-template-columns: 1fr;
91 +// Grid View
92 +function gridView() {
93 + for (i = 0; i < elements.length; i++) {
94 + elements[i].style.width = "50%";
170 170   }
171 - .info {
172 - justify-content: center;
173 - }
174 - .card-grid-space .num {
175 - /margin-left: 0;
176 - /text-align: center;
177 - }
178 178  }
179 179  
180 -@media screen and (max-width: 500px) {
181 - .cards-wrapper {
182 - padding: 4rem 2rem;
183 - }
184 - .card {
185 - max-width: calc(100vw - 4rem);
186 - }
98 +/* Optional: Add active class to the current button (highlight it) */
99 +var container = document.getElementById("btnContainer");
100 +var btns = container.getElementsByClassName("btn");
101 +for (var i = 0; i < btns.length; i++) {
102 + btns[i].addEventListener("click", function() {
103 + var current = document.getElementsByClassName("active");
104 + current[0].className = current[0].className.replace(" active", "");
105 + this.className += " active";
106 + });
187 187  }
108 +</script>
188 188  
189 -@media screen and (max-width: 450px) {
190 - .info {
191 - display: block;
192 - text-align: center;
193 - }
194 - .info h1 {
195 - margin: 0;
196 - }
197 -}
198 -{{/code}}
110 +</body>
111 +</html>
112 +
113 +{{/html}}
title
... ... @@ -1,1 +1,1 @@
1 -$services.localization.render('rendering.macro.code.name')
1 +$services.localization.render('rendering.macro.html.name')