~johanvandegriff/games.johanv.xyz

7bbd45f670b6b288d254776e09575583435cc6a2 — Johan Vandegriff 1 year, 5 months ago 155206f
converted buttons to toggle switches
2 files changed, 76 insertions(+), 4 deletions(-)

M static/boggle.css
M templates/boggle/view.html
M static/boggle.css => static/boggle.css +62 -0
@@ 376,3 376,65 @@ svg.ct-chart-bar, svg.ct-chart-line{
      height: 70vw;
  }
}



label.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
}

label.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

label.switch span.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

label.switch span.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

label.switch input:checked + span.slider {
  background-color: #2196F3;
}

label.switch input:focus + span.slider {
  box-shadow: 0 0 1px #2196F3;
}

label.switch input:checked + span.slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}

/* Rounded sliders */
label.switch span.slider.round {
  border-radius: 17px;
}

label.switch span.slider.round:before {
  border-radius: 50%;
}

M templates/boggle/view.html => templates/boggle/view.html +14 -4
@@ 69,8 69,12 @@
                </form>
                <br/>
                Display words:
                <button onclick="app.parallelView = true;">Parallel</button>
                <button onclick="app.parallelView = false;">Chronological</button>
                Parallel
                <label class="switch">
                    <input type="checkbox" onclick="app.parallelView = this.checked;">
                    <span class="slider round"></span>
                </label>
                Chronological
            <table class="grayTable" style="white-space: nowrap;" v-if="game != undefined">
                <thead>
                    <tr>


@@ 132,8 136,14 @@
                All [[ game.maxWords ]] possible words for this board.<br/>
                Hover/Tap a word to see the definition.<br/>
                Sort by:
                <button onclick="app.sortByPoints = true;">Points</button>
                <button onclick="app.sortByPoints = false;">Alphabetical</button>
                Points
                <label class="switch">
                    <input type="checkbox" onclick="app.sortByPoints = !this.checked;">
                    <span class="slider round"></span>
                </label>
                Alphabetical
                <!-- <button onclick="app.sortByPoints = true;">Points</button>
                <button onclick="app.sortByPoints = false;">Alphabetical</button> -->
                <br/><br/>
                <span v-if="sortByPoints"><span v-for="word in wordsPointsByPoints">
                    <span @mouseenter="wordHoverStart(word[0])" @mouseleave="wordHoverEnd(word[0])" :style="found.includes(word[0]) ? 'color:green; font-weight:bold' : ''">