kristjanjansen/cusco

Component-based functional UI based on Laravel Collections

cusco's Issues

Remove dumb class

Make image overlay scrollable

http://www.luxiyalu.com/playground/overlay/

Create larger version of Link component

component('Link')->is('large)-> ....

and

.Link .Link--large {
...
}

Cleanup action in editor

https://lodash.com/docs#unescape

or

https://github.com/mathiasbynens/he

Use arrow functions in dispatcher

        'alert': function (alert) { this.$broadcast('alert', alert) },
        'ImageUploaded': function () { this.$broadcast('ImageUploaded') }

Use globalVars in dropzone

Create Link component

Blade component

component('Link')
    ->with('icon', 'icon-arrow-right') // default
    ->with('title', '')
    ->with('route', '')

Looks roughly like

Add geodesic arc

https://github.com/henrythasler/Leaflet.Geodesic

Support tables

https://github.com/webuni/commonmark-table-extension

Use $loop (5.3) instead of collection hacks

https://mattstauffer.co/blog/the-new-loop-variable-in-laravel-5-3

Flag

Flag (new)

• Vue

  component('Flag')
      ->with('route_good')
      ->with('route_bad')
      ->with('value_good')
      ->with('value_bad')

Use Tether

http://github.hubspot.com

https://github.com/samcrosoft/vue-tooltip

Current TODO

Before migration to production

Map

• Waypoints
• Geodesic arc https://github.com/henrythasler/Leaflet.Geodesic

Forms

• ImageUpload customizable field title / errors
• ImageUpload hidden image id
• ImageUpload fallback upload image field?
• Buttongroup / radio

Buttons

• Button route

Masthead

• NewsMasthead
• SimpleMasthead / ForumMasthead ?

Nav

• Routes / strings
• User image
• Badge

Footer

• title / route
• Social icons
• Rss routes / icons
• links conf

Comment

• To Vue
• Remove border on mobile
• Smaller image on mobile
• unpublished

Editor

• Load/Save content
• Scroll for filepicker http://www.luxiyalu.com/playground/overlay/

ProfileImage

• To Vue?
• small / medium / large?
• Add hover with http://github.hubspot.com/ (Tether) or https://github.com/samcrosoft/vue-tooltip

Actions (new)

• Vue, just do it

SearchSmall / SearchField (new)

• Vue

• https://www.npmjs.com/package/vue-focus

  component('SearchSmall')
      ->with('route')
      ->with('placeholder') // ?
  

Components API

• hide() / show()

Migraton

/public/v2/css/main.css
/public/v2/js/main.js
/svg
/photos|static|assets|bitmaps|jpg

/resources/views/v2/...

/app/Helpers
/app/http/Regions

/elixir/...

gulp

/app/http/Controllers/ForumControllerV2 // ?

/app/ForumV2 // ?

After migration to production

SlotLoader / Slot

component('SlotLoader')

$get('/slots').then((res) =>
    this.$broadcast('showSlots', res.data)
)

// ... 

events:

    showSlots: function(slots) {
        this.slot = slots[this.slotId] ?? {}
    }

DestinationBar

• PHP

  component('DestinationBar')
      ->with('title', '')
      ->with('route', '')
      ->with('subtitle', '') // Pass > HTML?
  

Nav

• Fix position with http://github.hubspot.com/ (Tether)

Block / layouts

• use 5.3 $loop https://mattstauffer.co/blog/the-new-loop-variable-in-laravel-5-3

Forms

• Consider using http://abpetkov.github.io/switchery/ for checkboxes

Masthead

• ProfileMashead

Date

http://nosir.github.io/cleave.js/

Create Arc component

http://stackoverflow.com/questions/5736398/how-to-calculate-the-svg-path-for-an-arc-of-a-circle
http://jsbin.com/cibicecuto/edit?html,js,output

Add Badge component

Make it a Blade component for now (we might convert it to Vue later)

Test with single, double and triple number. Make it round with a single number.

Make it centered using flexbox and font size around $font-heading-md

Color is $white on $red
https://github.com/tripikad/cusco/blob/master/resources/views/utils/variables.css#L9

Update vue-multiselect

https://github.com/monterail/vue-multiselect/releases/tag/1.0.0