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.

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

UI Revamp #5

Merged
merged 1 commit into from
Aug 10, 2018
Merged

UI Revamp #5

merged 1 commit into from
Aug 10, 2018

Conversation

pedroseac
Copy link

@pedroseac pedroseac commented Jul 11, 2018

VueJS on all pages, and UI Revamp.

  • Added support for VueJS and refactored pages using it
  • Separated files around, now each page has is own js controller file
  • Created component for navigation bar in VueJS
  • Revamped UI using bulma.io (Bye Bootstrap!)
  • Changed datepicker from events page

WARNING: I moved all source files into an src folder, careful when merging

TODO: use Vue routing system for SPA


This change is Reviewable

cgi-bin/init.sh Outdated
@@ -10,5 +10,5 @@ fi
VOLLEY_DB=$DB VOLLEY_DEBUG=1 QUERY_STRING=action=init ./vb.cgi

# temporary add an event and a guest for testing
VOLLEY_DB=$DB VOLLEY_DEBUG=1 QUERY_STRING=action=add_event\&date=test_date\&location=location\&payment_link=tbd ./vb.cgi
VOLLEY_DB=$DB VOLLEY_DEBUG=1 QUERY_STRING=action=add_event\&date="11/07/2018 19:30"\&location=Pijp\&payment_link=tbd ./vb.cgi

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Isn't the location BlauwWit?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, but this is just local test. I guess it doesn't make any difference

src/js/index.js Outdated
el: '#current-event-info',
template: `
<p>
Most recent event:
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Most recent event was gone already, by the way

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removed

src/js/index.js Outdated
</strong>
&nbsp;
<span v-if="start">
<span title="Add to Calendar" class="addeventatc">
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The way how date is displayed changed. Before Wednesday, Jul 11th 2018 at 19:30, after 31.07.2018 19:30.

Copy link
Author

@pedroseac pedroseac Jul 12, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed

but on the events page I'm using dd/mm/yyyy HH:mm format

index.html Outdated
<a class="nav-link" href="events.html">All events</a>
</li>
<li class="nav-item">
<a class="nav-link" href="shame.html">Shame</a>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change breaks navigation (Shame is missing for example).

Copy link
Author

@pedroseac pedroseac Jul 12, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

re-added

index.html Outdated
$('.addeventatc .description').text(result.message.date + ' ' + result.message.location);
$('.addeventatc .location').text(result.message.location);
<!-- js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would vue.min.js replace jquery?

Copy link
Author

@pedroseac pedroseac Jul 12, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup! But I'm still using $.ajax, so still need that bit. Gonna work to change it to fetch

@pedroseac pedroseac changed the title Added VueJS to index page! Hooray! UI Revamp Jul 13, 2018
@pedroseac pedroseac force-pushed the master branch 2 times, most recently from eaab891 to 712b029 Compare August 10, 2018 16:44
1. Added VueJS to index page! Hooray!

Currently, I'm just it using as controller for some components of the page, which makes it easier
for data binding.

WARNING: I moved all source files into a src folder, careful when merging

TODO: use Vue routing system for SPA

2. Huge Front end refactor

- Separated files around, now each page has is own js controller file
- Created component for navigation bar in VueJS
- Revamped UI using bulma.io (Bye Bootstrap!)
- Changed datepicker from events page
@sharifmarat sharifmarat merged commit 3d0fbde into sharifmarat:master Aug 10, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants