Skip to Content

Changes for page Academy

Last modified by Erik Bakker on 2024/09/24 16:12
From version 38.1
edited by Erik Bakker
on 2022/04/21 15:54
Change comment: There is no comment for this version
To version 36.1
edited by Erik Bakker
on 2022/04/21 15:52
Change comment: Added object

Summary

Details

XWiki.GadgetClass[1]
content
... ... @@ -2,7 +2,7 @@
2 2  <!DOCTYPE html>
3 3  <html>
4 4  <head>
5 -<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
5 +<meta name="viewport" content="width=device-width, initial-scale=1">
6 6  <style>
7 7  * {
8 8   box-sizing: border-box;
... ... @@ -13,6 +13,7 @@
13 13   float: left;
14 14   width: 50%;
15 15   padding: 10px;
16 + height: 20px; /* Should be removed. Only for demonstration */
16 16  }
17 17  
18 18  /* Clear floats after the columns */
... ... @@ -21,37 +21,20 @@
21 21   display: table;
22 22   clear: both;
23 23  }
24 -/* Style the buttons */
25 -.btn {
26 - border: none;
27 - outline: none;
28 - padding: 12px 16px;
29 - background-color: #f1f1f1;
30 - cursor: pointer;
31 -}
32 32  
33 -.btn:hover {
34 - background-color: #ddd;
26 +/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
27 +@media screen and (max-width: 10px) {
28 + .column {
29 + width: 100%;
30 + }
35 35  }
36 -
37 -.btn.active {
38 - background-color: #666;
39 - color: white;
40 -}
41 41  </style>
42 42  </head>
43 43  <body>
44 44  
45 -<h2>List View or Grid View</h2>
36 +<h2>Responsive Two Column Layout</h2>
37 +<p>Resize the browser window to see the responsive effect (the columns will stack on top of each other instead of floating next to each other, when the screen is less than 600px wide).</p>
46 46  
47 -<p>Click on a button to choose list view or grid view.</p>
48 -
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>
54 -
55 55  <div class="row">
56 56   <div class="column" style="background-color:#aaa;">
57 57   <h2>Column 1</h2>
... ... @@ -62,52 +62,6 @@
62 62   <p>Some text..</p>
63 63   </div>
64 64  </div>
65 -
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>
76 -
77 -<script>
78 -// Get the elements with class="column"
79 -var elements = document.getElementsByClassName("column");
80 -
81 -// Declare a loop variable
82 -var i;
83 -
84 -// List View
85 -function listView() {
86 - for (i = 0; i < elements.length; i++) {
87 - elements[i].style.width = "100%";
88 - }
89 -}
90 -
91 -// Grid View
92 -function gridView() {
93 - for (i = 0; i < elements.length; i++) {
94 - elements[i].style.width = "50%";
95 - }
96 -}
97 -
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 - });
107 -}
108 -</script>
109 -
110 110  </body>
111 111  </html>
112 -
113 113  {{/html}}