Skip to content
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

More UI Tweaks #360

Merged
merged 6 commits into from
Feb 18, 2024
Merged

More UI Tweaks #360

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0009162
Initializing More_UI_Tweaks for empty Pull Request
V13Axel Feb 16, 2024
1ea59f6
Combine refresh button
V13Axel Feb 16, 2024
58b08d8
Disable inite button when email field is empty
V13Axel Feb 16, 2024
e75c09c
Toggleable reordering of timespans
V13Axel Feb 16, 2024
46ba584
Beautify the months list
V13Axel Feb 16, 2024
d928c75
Move footer copyright to sidebar
V13Axel Feb 16, 2024
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
29 changes: 15 additions & 14 deletions resources/js/calendar/calendar_inputs_edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2818,20 +2818,21 @@ function add_timespan_to_sortable(parent, key, data){

var element = $(
`<div class='sortable-container list-group-item ${data.type} collapsed collapsible' type='${data.type}' index='${key}' x-data="{ type: '${data.type}', week: ${JSON.stringify(data.week ?? [])} }">
<div class='main-container'>
<div class='handle icon-reorder'></div>
<div class='expand icon-expand'></div>
<div class='name-container'>
<input value="${data.name}" type='text' step='1.0' tabindex='${(100+key)}'class='name-input small-input form-control dynamic_input' data='year_data.timespans.${key}' fc-index='name'/>
<div class='main-container' x-data="{ deleting: false }">
<div class='handle icon-reorder' x-show="reordering && !deleting"></div>
<div class='expand icon-expand' x-show="!reordering && !deleting"></div>
<div class='name-container input-group' x-show="!deleting">
<input value="${data.name}" type='text' step='1.0' tabindex='${(100+key)}' class='flex-grow-1 name-input small-input form-control dynamic_input pr-0' data='year_data.timespans.${key}' fc-index='name'/>
<input type='number' min='1' class='flex-shrink-1 length-input form-control dynamic_input timespan_length' data='year_data.timespans.${key}' fc-index='length' tabindex='${(100+key)}' value='${data.length}'/>
</div>
<div class='length_input'><input type='number' min='1' class='length-input form-control dynamic_input timespan_length' data='year_data.timespans.${key}' fc-index='length' tabindex='${(100+key)}' value='${data.length}'/></div>
<div class="remove-spacer"></div>
</div>
<div class='remove-container'>
<div class='remove-container-text'>Are you sure you want to remove this?</div>
<div class='btn_remove btn btn-danger icon-trash'></div>
<div class='btn_cancel btn btn-danger icon-remove'></div>
<div class='btn_accept btn btn-success icon-ok'></div>
<div class='d-flex align-items-center justify-content-between full' :class="{ 'hidden': !deleting }">
<div class='pl-1'>Are you sure?</div>
<div class='d-flex align-items-center'>
<div @click='deleting = false' class='btn btn-danger icon-remove mx-1'></div>
<div class='btn_accept btn btn-success icon-ok d-block'></div>
</div>
</div>
<div @click='deleting = true' class='btn btn-danger icon-trash ml-1' x-show="reordering && !deleting"></div>
</div>

<div class='collapse-container container pb-2'>
Expand Down Expand Up @@ -3421,7 +3422,7 @@ function add_location_to_list(parent, key, data){

element.push(`<div class='m-0 my-2 cycle-container wrap-collapsible location_season' fc-index='${i}'>`);
element.push(`<input id='collapsible_seasons_${key}_${i}' class='toggle location_toggle' type='checkbox'>`);
element.push(`<label for='collapsible_seasons_${key}_${i}' class='lbl-toggle location_name'><div class='icon icon-expand'></div> Weather settings: ${static_data.seasons.data[i].name}</label>`);
element.push(`<label for='collapsible_seasons_${key}_${i}' class='lbl-toggle location_name'><div class='icon icon-expand'></div>${static_data.seasons.data[i].name} weather</label>`);

element.push("<div class='collapsible-content container p-0'>");

Expand Down
2 changes: 1 addition & 1 deletion resources/sass/calendar/_variables-dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ $sidebar-width: 400px;
$wiki-link-color: rgba(255, 255, 255, 0.2);
$wiki-link-hover-color: white;
$main-text-color: rgba(255, 255, 255, 0.8);
$gray-secondary: $gray-600;
$gray-secondary: $gray-700;
$action-bg-color: rgba(166, 168, 179, 0.32);
$action-icon-color: white;
$weather-tooltip-bg-color: rgba($gray-900, 0.85);
Expand Down
15 changes: 4 additions & 11 deletions resources/sass/calendar/inputs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ select.invalid {

.sortable-container.intercalary,
.sortable-container.intercalary .visible {
background-color: $gray-secondary;
background-color: rgba($gray-secondary, 0.55);
}

.sortable-container.intercalary .border {
Expand Down Expand Up @@ -241,16 +241,9 @@ input[type="number"]:not(.spinner) {
width: 70%;
}

.length_input {
display: inline-flex;
justify-content: flex-end;
margin-left: auto;
text-align: left;
width: 30%;
}

.length_input input {
margin-left: 5px;
.timespan_length {
width: 46px !important;
flex: revert !important;
}

.collapsed > .collapse-container {
Expand Down
3 changes: 2 additions & 1 deletion resources/sass/calendar/layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,8 @@ body.page-calendars-index {
margin-right: 0;
}

#input_container > .accordion > .wrap-collapsible:last-child {
#input_container .copyright {
margin-top: 10px;
margin-bottom: 9rem;
}

Expand Down
44 changes: 27 additions & 17 deletions resources/views/inputs/full.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -688,7 +688,7 @@ class="mr-2 fas fa-calendar-alt"></i> Months <a target="_blank" data-pt-position
href='{{ helplink('months') }}'
class="wiki protip"><i
class="icon-question-sign"></i></a></label>
<div class="collapsible-content card-body">
<div class="collapsible-content card-body" x-data="{ reordering: false }">

@if(request()->is('calendars/*/edit') && $calendar->isLinked())

Expand Down Expand Up @@ -732,13 +732,13 @@ class="icon-question-sign"></i></a></label>

@else

<div class='row bold-text'>
<div class='row bold-text mb-3'>
<div class="col">
New month:
</div>
</div>

<div class='add_inputs timespan row no-gutters mb-2 input-group'>
<div class='add_inputs timespan row no-gutters input-group'>

<input type='text' id='timespan_name_input' class='form-control name' placeholder='Name'>

Expand All @@ -752,13 +752,22 @@ class="icon-question-sign"></i></a></label>
</div>
</div>

<div class="row no-gutters mb-2">
<button class="full btn btn-secondary" @click="reordering = true" x-show="!reordering">
<i class="fa fa-arrows-alt-v"></i> Change order
</button>
<button class="full btn btn-secondary" @click="reordering = false" x-show="reordering">
<i class="fa fa-check"></i> Done
</button>
</div>
<div class="row sortable-header timespan_sortable_header hidden">
<div class='col-6' style="padding-left:25%;">Name</div>
<div class='col-6' style="padding-left:55px">Name</div>
<div class='col-6' style="padding-left:20%;">Length</div>
</div>

<div class='sortable list-group' id='timespan_sortable'></div>


@endif

</div>
Expand Down Expand Up @@ -1721,10 +1730,10 @@ class="icon-question-sign"></i></a></label>
<p><small>Once they accept your invite, you'll be able to assign them a role.</small></p>
</div>

<div class='row no-gutters my-1 input-group'>
<input type='text' class='form-control' id='email_input' placeholder='Email'>
<div class='row no-gutters my-1 input-group' x-data="{ email: '' }">
<input type='text' class='form-control' id='email_input' x-model='email' placeholder='Email'>
<div class="input-group-append">
<button type='button' class='btn full btn-primary' id='btn_send_invite'>Send Invite </button>
<button type='button' class='btn full btn-primary' id='btn_send_invite' :disabled="!email">Invite </button>
</div>
</div>
<div class='row no-gutters mb-2 hidden'>
Expand Down Expand Up @@ -1797,13 +1806,13 @@ class="icon-question-sign"></i> Calendar Linking</a>.</small></p>
</div>
@else

<div class='row no-gutters my-1'>
<div class='input-group my-1'>
<select class='form-control' id='calendar_link_select'></select>
</div>
<div class='row no-gutters my-1'>
<button type='button' class='btn btn-sm btn-secondary full'
<div class="input-group-append">
<button type='button' class='btn btn-sm btn-secondary full'
id='refresh_calendar_list_select'>Refresh
</button>
</button>
</div>
</div>

<div class='sortable' id='calendar_link_list'></div>
Expand All @@ -1825,6 +1834,12 @@ class="icon-question-sign"></i> Calendar Linking</a>.</small></p>
</div>
@endif
</div>

<div class="copyright text-center">
<small class="copyright d-inline-block mb-2">Copyright © {{ date('Y') }} Fantasy Computerworks Ltd <br>
<a href="{{ route('terms-and-conditions') }}">Terms and Conditions</a> - <a
href="{{ route('privacy-policy') }}">Privacy and Cookies Policy</a></small>
</div>
</div>

<div id="calendar_container">
Expand Down Expand Up @@ -1928,11 +1943,6 @@ class='flexible_background blurred_background d-flex flex-column justify-content
</div>

</div>
<div class="copyright text-center">
<small class="copyright d-inline-block mb-2">Copyright © {{ date('Y') }} Fantasy Computerworks Ltd - <a
href="{{ route('terms-and-conditions') }}">Terms and Conditions</a> - <a
href="{{ route('privacy-policy') }}">Privacy and Cookies Policy</a></small>
</div>

</div>
<div id='html_edit'></div>
Loading