Skip to content

Controlling Chooser With License Icon Selections #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Aug 27, 2019
Merged

Controlling Chooser With License Icon Selections #18

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
b8e164c
Remove radio button controls
Jul 3, 2019
95ea28a
Add commercial uses icon
Jul 5, 2019
f8c28be
Add SA icon, still a bit buggy
Jul 5, 2019
ac04dc2
Try out new layout
Jul 7, 2019
23dacc0
Add chooser icon descriptions
Jul 10, 2019
72450a5
Get SA toggle working properly
Jul 10, 2019
42dd0a7
Get SA display toggling working
Jul 10, 2019
02d0956
Add hover shading to icons
Jul 10, 2019
7c7af67
Fix broken CSS, Fix broken chooser logic
Jul 10, 2019
820b2d9
Cleanup
Jul 17, 2019
1215a86
Play around with getting icon description to select license feature
Jul 23, 2019
1a3b0af
Merge branch 'master' into chooser-icon_selection
Aug 27, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Add commercial uses icon
  • Loading branch information
Ari committed Jul 5, 2019
commit 95ea28a8fedc0ff5e782e87618a6901c36292fe4
52 changes: 15 additions & 37 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ <h1 class="title is-1">CC License Chooser</h1>
Confused? Check out the "<b>Need Help?</b>" section just below!
</p> <br>
<div class="columns">
<!--
<div class="column" id="chooser-controls-switch">
<p style="display: none" align="center">Changes to the options below will affect the license choice to the right.</p> <br>
<div id="license-chooser-allow-adaptations">
Expand Down Expand Up @@ -82,24 +83,16 @@ <h4 class="title is-4">
</span>
<div class="control" style="margin-left: 9%; padding-top: 1%;">
<div class="columns is-gapless">
<div class="field column is-one-fifth">
<label for="allow-adaptations-switch">No</label>
<div class="field column is-one-fifth chooser-controls-icons">
<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1" onclick="console.log('clicked')">
<img src="assets/license-icons/cc-nd-icon.svg">
</label>
<input id="allow-adaptations-switch" type="checkbox"
name="allow-adaptations-switch" class="switch is-thin"
checked="checked" onchange="switch_callback(this)">
<label for="allow-adaptations-switch">Yes</label>
</div>
<div class="field column is-pulled-left" style="display: inline;">
<p class="control is-pulled-left">
<div class="b-checkbox is-primary" id="sa-checkbox" style="display: inline;">
<input id="checkbox" class="styled is-primary"
type="checkbox" onchange="sa_check_callback(this)">
<label for="checkbox">
Yes, but others must share under the same license.
</label>
</div>
</p>
</div>
</div>
</div>
</div> <br><br>
Expand Down Expand Up @@ -150,7 +143,7 @@ <h4 class="title is-4">
</div>
</div>
</div> <br><br>
</div><!--
</div>-->
<div class="column" id="chooser-controls-images">
<p align="center">Changes to the options below will affect the license choice to the right.</p> <br><br>
<div id="license-chooser-allow-adaptations">
Expand All @@ -161,23 +154,9 @@ <h4 class="title is-4">
</h4>
</span>
<div class="control" style="margin-left: 9%; padding-top: 1%;">
<div class="columns is-gapless">
<div class="field column is-one-fifth">
<label for="allow-adaptations-switch">No</label>
<input id="allow-adaptations-switch" type="checkbox" name="allow-adaptations-switch" class="switch is-thin" checked="checked">
<label for="allow-adaptations-switch">Yes</label>
</div>
<div class="field column is-pulled-left" style="display: inline;">
<p class="control is-pulled-left">
<div class="b-checkbox is-primary" style="display: inline;">
<input id="checkbox" class="styled" checked type="checkbox">
<label for="checkbox">
SA Checkbox
</label>
</div>
</p>
</div>
</div>
<input id="allow-adaptations-switch" type="checkbox" class="css-checkbox"
onchange="switch_callback(this)" name="allow-adaptations-switch">
<label for="allow-adaptations-switch" class="css-label"></label>
</div>
</div> <br><br>
<div class="license-chooser-allow-commercial">
Expand All @@ -189,15 +168,14 @@ <h4 class="title is-4">
</span>
<div class="control" style="margin-left: 9%; padding-top: 1%;">
<div class="field">
<p>Selected Example</p>
<img src="assets/license-icons/cc-nc_icon.svg" class="chooser-controls-icons">

<p>Unselected Example</p>
<img src="assets/license-icons/cc-nc_icon.svg" class="unselected">
<input id="allow-commercial-switch" type="checkbox" class="css-checkbox is-commercial"
onchange="switch_callback(this)" name="allow-commercial-switch"
style="background-image: url(assets/license-icons/cc-nc_icon.svg)">
<label for="allow-commercial-switch" class="css-label is-commercial"></label>
</div>
</div>
</div> <br><br>
</div>-->
</div>
<!--
<div class="column" align="center">
<h3 class="title is-3">Your License!</h3> <br><br>
Expand Down
4 changes: 2 additions & 2 deletions src/scripts/choose-a-license.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,12 +136,12 @@ function switch_callback(cb) {
if (cb.checked) { // If allow adaptations
console.log("Is Allow Adaptations - " + cb.checked)
state.allow_adaptations = true
show_sa_check()
//show_sa_check()
set_license()
}
else { // If NOT allow adaptations
state.allow_adaptations = false
hide_sa_check()
//hide_sa_check()
}
break;
case "allow-commercial-switch":
Expand Down
28 changes: 28 additions & 0 deletions src/styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,34 @@ h3 {
margin-bottom: 1em
}

input[type=checkbox].css-checkbox{ display: none; }

.css-label {
padding-left: 20px;
display: flex;
height: 55px;
background-image: url(../assets/license-icons/cc-nd-icon.svg);
background-repeat: no-repeat;
background-size: contain;
opacity: 1;
filter: alpha(opacity=100);
}

input[type=checkbox].css-checkbox:checked + label.css-label {
background-position: 0 0;
background-image: url(../assets/license-icons/cc-nd-icon.svg);
opacity: 0.4;
filter: alpha(opacity=40); /* msie */
}

.css-label.is-commercial {
background-image: url(../assets/license-icons/cc-nc_icon.svg)
}

input[type=checkbox].css-checkbox:checked + label.css-label.is-commercial {
background-image: url(../assets/license-icons/cc-nc_icon.svg)
}

.chooser-selected-title img {
vertical-align: middle;
width: 42px;
Expand Down