-
-
Save al-the-x/533ba478c44a89941ff2 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| diff --git a/ViewModeSwitch/css/styles.css b/ViewModeSwitch/css/styles.css | |
| index 8dcc553..cb11f25 100755 | |
| --- a/ViewModeSwitch/css/styles.css | |
| +++ b/ViewModeSwitch/css/styles.css | |
| @@ -25,15 +25,35 @@ h3 { | |
| #cbp-vm { | |
| border-style: solid; | |
| border-color: cornflowerblue; | |
| - padding-top: 5em; | |
| - padding-left: 5em; | |
| } | |
| -li { | |
| - list-style: none; | |
| +.cbp-vm-switcher.cbp-vm-view-grid li { | |
| + display: inline-block; | |
| + width: 30%; | |
| +} | |
| + | |
| +.cbp-vm-switcher.cbp-vm-view-list li { | |
| + display: block; | |
| +} | |
| +.cbp-vm-switcher.cbp-vm-view-list li > * { | |
| + display: inline-block; | |
| +} | |
| +.cbp-vm-switcher.cbp-vm-view-list li .cbp-vm-image { | |
| + width: 25%; max-width: 200px; | |
| + | |
| +} | |
| +.cbp-vm-switcher.cbp-vm-view-list li .cbp-vm-title { | |
| + | |
| } | |
| .cbp-vm-options { | |
| + text-align: right; | |
| +} | |
| + | |
| +.cbp-vm-options .cbp-vm-icon { | |
| color: cornflowerblue; | |
| - text-decoration-line: underline; | |
| + text-decoration: none; | |
| + width: 5em; height: 5em; | |
| + display: inline-block; | |
| + background-color: lightblue; | |
| } | |
| diff --git a/ViewModeSwitch/index.html b/ViewModeSwitch/index.html | |
| index 3368387..6d31937 100755 | |
| --- a/ViewModeSwitch/index.html | |
| +++ b/ViewModeSwitch/index.html | |
| @@ -15,28 +15,8 @@ | |
| <body> | |
| <div class="container"> | |
| - <header class="clearfix"> | |
| - <span>Blueprint | |
| - <span class="bp-icon bp-icon-about" data-content="The Blueprints are a collection of basic and minimal website concepts, components, plugins and layouts with minimal style for easy adaption and usage, or simply for inspiration."></span> | |
| - </span> | |
| - <h1>View Mode Switch</h1> | |
| - <nav> | |
| - <a href="http://tympanus.net/Blueprints/AnimatedHeader/" class="bp-icon bp-icon-prev" data-info="previous Blueprint"> | |
| - <span>Previous Blueprint</span> | |
| - </a> | |
| - <a href="http://tympanus.net/Blueprints/ResponsiveIconGrid/" class="bp-icon bp-icon-next" data-info="next Blueprint"> | |
| - <span>Next Blueprint</span> | |
| - </a> | |
| - <a href="http://tympanus.net/codrops/?p=15656" class="bp-icon bp-icon-drop" data-info="back to the Codrops article"> | |
| - <span>back to the Codrops article</span> | |
| - </a> | |
| - <a href="http://tympanus.net/codrops/category/blueprints/" class="bp-icon bp-icon-archive" data-info="Blueprints archive"> | |
| - <span>Go to the archive</span> | |
| - </a> | |
| - </nav> | |
| - </header> | |
| <div class="main"> | |
| - <div id="cbp-vm" class="cbp-vm-switcher cbp-vm-view-grid"> | |
| + <div id="cbp-vm" class="cbp-vm-switcher cbp-vm-view-list"> | |
| <div class="cbp-vm-options"> | |
| <a href="#" class="cbp-vm-icon cbp-vm-grid cbp-vm-selected" data-view="cbp-vm-view-grid">Grid View</a> | |
| <a href="#" class="cbp-vm-icon cbp-vm-list" data-view="cbp-vm-view-list">List View</a> | |
| diff --git a/ViewModeSwitch/js/scripts.js b/ViewModeSwitch/js/scripts.js | |
| index dfe2751..1d346ae 100755 | |
| --- a/ViewModeSwitch/js/scripts.js | |
| +++ b/ViewModeSwitch/js/scripts.js | |
| @@ -2,26 +2,28 @@ | |
| Was stuck on where to start for this so I used some @gatorpazz JavaScript code | |
| so that I could try to get started with the CSS, icons, etc. | |
| */ | |
| -( function( window ) { | |
| -'use strict'; | |
| -alert('JavaScript wired?'); | |
| +(function(window){ | |
| + 'use strict'; | |
| + // alert('JavaScript wired?'); | |
| -var container = document.getElementById('cbp-vm'); | |
| -var gridSwitch = document.querySelector('a.cbp-vm-grid'); | |
| -var listSwitch = document.querySelector('a.cbp-vm-list'); | |
| + var container = document.getElementById('cbp-vm'); | |
| -gridSwitch.addEventListener('click', function(){ | |
| - gridSwitch.classList.toggle('cbp-vm-selected', true); | |
| - listSwitch.classList.toggle('cbp-vm-selected', false); | |
| - event.target.parentNode.parentNode.classList.toggle('cbp-vm-view-grid', true); | |
| - event.target.parentNode.parentNode.classList.toggle('cbp-vm-view-list', false); | |
| -}) | |
| + var gridSwitch = document.querySelector('a.cbp-vm-grid'); | |
| -listSwitch.addEventListener('click', function(){ | |
| - listSwitch.classList.toggle('cbp-vm-selected', true); | |
| - gridSwitch.classList.toggle('cbp-vm-selected', false); | |
| - event.target.parentNode.parentNode.classList.toggle('cbp-vm-view-list', true); | |
| - event.target.parentNode.parentNode.classList.toggle('cbp-vm-view-grid', false); | |
| -}) | |
| + var listSwitch = document.querySelector('a.cbp-vm-list'); | |
| + | |
| + gridSwitch.addEventListener('click', function(){ | |
| + gridSwitch.classList.toggle('cbp-vm-selected', true); | |
| + listSwitch.classList.toggle('cbp-vm-selected', false); | |
| + event.target.parentNode.parentNode.classList.toggle('cbp-vm-view-grid', true); | |
| + event.target.parentNode.parentNode.classList.toggle('cbp-vm-view-list', false); | |
| + }); | |
| + | |
| + listSwitch.addEventListener('click', function(){ | |
| + listSwitch.classList.toggle('cbp-vm-selected', true); | |
| + gridSwitch.classList.toggle('cbp-vm-selected', false); | |
| + event.target.parentNode.parentNode.classList.toggle('cbp-vm-view-list', true); | |
| + event.target.parentNode.parentNode.classList.toggle('cbp-vm-view-grid', false); | |
| + }); | |
| })( window ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment