Skip to content

Commit

Permalink
Bunch of mobile improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@V13Axel
V13Axel committed Nov 12, 2023
1 parent d67a056 commit 2936b1a
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 33 deletions.
36 changes: 35 additions & 1 deletion resources/js/events-manager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const events_manager = {
selected: {},
visibility: "any",
updateCategoryTo: null,
showFilters: true,
showFilters: false,

init() {
this.$watch("window.events", () => {
Expand All @@ -35,6 +35,40 @@ const events_manager = {
});
},

hideSelected($dispatch) {
Object.entries(this.selected)
.filter((entry) => entry[1])
.forEach((event) => {
let canonicalEvent = window.events.find(
(canonicalEvent) =>
canonicalEvent.id.toString() === event[0],
);

canonicalEvent.settings.hide = true;
});

this.selected = {};

$dispatch("events-changed");
},

unhideSelected($dispatch) {
Object.entries(this.selected)
.filter((entry) => entry[1])
.forEach((event) => {
let canonicalEvent = window.events.find(
(canonicalEvent) =>
canonicalEvent.id.toString() === event[0],
);

canonicalEvent.settings.hide = false;
});

this.selected = {};

$dispatch("events-changed");
},

eventVisibilityTooltip(event) {
if (event.settings.hide_full) {
return "This event is entirely hidden from the calendar.";
Expand Down
6 changes: 5 additions & 1 deletion resources/sass/app-dark.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,11 @@ body {
}

.border{
border: 1px solid rgba(166, 168, 179, 0.32) !important;
border: 1px solid rgb(51, 65, 85) !important;
}

.border-right {
border-right: 1px solid rgb(51, 65, 85) !important;
}

.btn-outline-secondary {
Expand Down
59 changes: 28 additions & 31 deletions resources/views/layouts/manage_events.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,12 @@ class="layout_background clickable_background hidden"
</div>
</div>
<div class="row no-gutters mt-3">
<div class="col-11 col-sm-4 mb-1 mb-md-0 mt-2 mt-lg-0 d-flex">
<div class="col-11 mb-1 mb-md-0 mt-2 mt-lg-0 d-flex align-items-center" :class="categories.length > 0 ? 'col-sm-5' : 'col-sm-9'">
<input type="checkbox" class="form-check mx-2" x-show="categories.length > 0" style="width: 20px; height: 20px;" x-model="multiselect"></input>

<div style="position: absolute; right: 0px; top: 0px; bottom: 0px; place-items: center; cursor: pointer; width: 50px; opacity: 0.8;"
@click="search = ''"
:class="search.length ? 'grid' : 'hidden'">
@click="search = ''"
:class="search.length ? 'grid' : 'hidden'">
<i class="fa fa-times"></i>
</div>

Expand All @@ -40,7 +42,7 @@ class="layout_background clickable_background hidden"
<i class="fa fa-filter" x-bind:style="showFilters ? 'color: rgb(5 150 105);' : ''"></i>
</div>

<div class="col-12 col-sm-4 pl-sm-1 mb-1 mb-md-0 mt-2 mt-lg-0 d-none d-sm-flex" :class="{ 'd-none': !showFilters }">
<div class="pl-sm-1 mb-1 mb-md-0 mt-2 mt-lg-0 d-none " :class="{ 'd-none': !showFilters || categories.length < 2, 'col-12 col-sm-4 d-sm-flex': categories.length > 1 }">
<select x-model="groupFilter" class="form-control">
<option value="-1">All categories</option>
<template x-for="([category_name, category_events]) in Object.entries(categorizedEvents)">
Expand All @@ -49,7 +51,7 @@ class="layout_background clickable_background hidden"
</select>
</div>

<div class="col-12 col-sm-4 pl-sm-1 mb-1 mb-md-0 mt-sm-2 mt-lg-0 d-none d-sm-flex" :class="{ 'd-none': !showFilters }">
<div class="col-12 col-sm-3 pl-sm-1 mb-1 mb-md-0 mt-sm-2 mt-lg-0 d-none d-sm-flex" :class="{ 'd-none': !showFilters }">
<select x-model="visibility" class="form-control">
<option value="any">Any visibility</option>
<option value="visible">Visible only</option>
Expand All @@ -58,33 +60,28 @@ class="layout_background clickable_background hidden"
</div>
</div>

<div class="d-flex justify-content-between border rounded-sm align-items-center py-2 px-2 mt-2">
<div>
<input type="checkbox" class="form-check mx-1" style="width: 20px; height: 20px;" x-model="multiselect"></input>
</div>
<div class="col-12 d-flex align-items-stretch mt-3 p-2 rounded border" :class="(multiselect && categories.length > 0) ? 'd-flex' : 'hidden'">
<select name="" class="form-control w-100 w-sm-auto" x-model="updateCategoryTo" id="" :disabled="!canUpdateCategory">
<option value="" x-text="numberSelected ? `Move ${numberSelected} to category...` : 'Move selected to category...'"></option>
<option value="-1">Remove from category</option>
<template x-for="category in categories">
<option :value="category.id" x-text="category.name"></option>
</template>
</select>

<div class="d-flex align-items-center flex-grow-1">
<div class="px-2 w-100" style="max-width: 300px;">
<select name="" class="form-control w-100 w-sm-auto" x-model="updateCategoryTo" id="" :disabled="!canUpdateCategory">
<option value="" x-text="numberSelected ? `Add ${numberSelected} to category...` : 'Add to category...'"></option>
<option value="-1">Remove from category</option>
<template x-for="category in categories">
<option :value="category.id" x-text="category.name"></option>
</template>
</select>
</div>
<button class="btn btn-primary flex-shrink-0 ml-1" @click="updateCategory($event, $dispatch)" :disabled="!updateCategoryTo">
<i class="fa fa-check"></i> <span class="d-none d-md-inline">Move</span>
</button>

<button class="btn btn-primary" @click="updateCategory($event, $dispatch)" :disabled="!updateCategoryTo">
<i class="fa fa-check"></i>
</button>
</div>
<div class="border-right ml-2 mr-1"></div>

<button class="btn btn-primary flex-shrink-0 ml-1" @click="unhideSelected($dispatch)" :disabled="!Object.keys(selected).length">
<i class="fa fa-eye"></i> <span class="d-none d-md-inline">Unhide</span>
</button>

{{-- <div> --}}
{{-- <button class="btn" :class="{ 'btn-primary': visibility == 'hidden', 'btn-secondary': visibility == 'visible'}" @click="cycleVisibility"> --}}
{{-- <i class="fa" :class="{ 'fa-eye-slash': visibility == 'hidden', 'fa-eye': visibility != 'hidden' }" title="Toggle visibility"></i> --}}
{{-- <span x-text="visibilityLabel"></span> --}}
{{-- </button> --}}
{{-- </div> --}}
<button class="btn btn-primary flex-shrink-0 ml-1" @click="hideSelected($dispatch)" :disabled="!Object.keys(selected).length">
<i class="fa fa-eye-slash"></i> <span class="d-none d-md-inline">Hide</span>
</button>
</div>

<div class="row" x-show="!Object.keys(categorizedEvents).length && (!search.length && visibility === 'any')">
Expand Down Expand Up @@ -201,9 +198,9 @@ class="layout_background clickable_background hidden"
<div class="managed_event_description text-left flex-grow-1">
<span class="pl-2 pl-md-3" x-html="highlight_match(event_data.name)"></span>
<span class="px-2 d-none d-sm-inline" style="opacity: 0.4;">&bull;</span>
<span class="d-none d-sm-inline" :class="{'opacity-70': event_data.description, 'opacity-30': !event_data.description }" style="font-size: 90%;" x-html="event_data.description ? highlight_match(event_data.description) : 'Event has no description'"></span>
<span class="d-none d-sm-inline" :class="{'opacity-70': event_data.description, 'opacity-30': !event_data.description }" x-html="event_data.description ? highlight_match(event_data.description) : 'Event has no description'"></span>
</div>
<button class="managed_event_action_icon" x-show="!multiselect" @click.stop="toggleEventHidden(event_data, $dispatch)">
<button class="managed_event_action_icon" :style="multiselect ? 'pointer-events: none;' : ''" @click.stop="toggleEventHidden(event_data, $dispatch)">
<i class="fa" :title="eventVisibilityTooltip(event_data)" :class="{ 'fa-eye-slash': event_data.settings.hide || event_data.settings.hide_full, 'fa-eye': !event_data.settings.hide, 'opacity-50' : event_data.settings.hide_full }"></i>
</button>
<button class="managed_event_action_icon" x-show="!multiselect" @click.stop="$dispatch('event-editor-modal-edit-event', { event_db_id: event_data.id, epoch: window.dynamic_data.epoch })">
Expand Down

0 comments on commit 2936b1a

Please sign in to comment.