Edward Lance Lorilla

onsen

1. App.vue を書き換える import HomePage from './components/HomePage' import AboutPage from './components/AboutPage' import MenuPage from './components/MenuPage' export default { data () { return { currentPage: 'HomePage' } }, components: { HomePage, AboutPage, MenuPage } } 2 MenuPage.vue を書き換える

import HomePage from './components/HomePage' import AboutPage from './components/AboutPage' import MenuPage from './components/MenuPage' export default { data () { return { essentialLinks: [ { label: 'HomePage', link: 'HomePage', icon: 'fa-book' }, { label: 'AboutPage', link: 'AboutPage', icon: 'fa-book' } ] } }, methods: { onClick (link) { this.$parent.$parent.$parent.$parent.$data.currentPage = link } } }

vuejs leaflet example

flexbox card view layout

geotagg

html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333;
}

.infopop h4 {
  font: 14px/16px Arial, Helvetica, sans-serif;
  font-weight: bold;
  margin: 0 0 0px;
  color: #777;
}

// set center coordinates
var coords = [34.069, -118.293];
// set default zoom level
var zoomLevel = 12;
// initialize map
var map = L.map('map').setView(coords, zoomLevel);
// set source for map tiles
ATTR = '© OpenStreetMap contributors, ' +
  'CC-BY-SA | ' +
  '© CartoDB';
CDB_URL = 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
// add tiles to map
L.tileLayer(CDB_URL, {
  attribution: ATTR
}).addTo(map);

var photos = [{
  "lat": 34.04555452,
  "lng": -118.3001509,
  "name": "C.H. Johnston, 1951",
  "url": "http://41.media.tumblr.com/8dd3cc5931650a6a772db77f6fad797b/tumblr_n5c7uw79Yn1tq6tdto1_400.jpg",
  "thumbnail": "http://40.media.tumblr.com/8dd3cc5931650a6a772db77f6fad797b/tumblr_n5c7uw79Yn1tq6tdto1_75sq.jpg"
}, {
  "lat": 34.0522683,
  "lng": -118.2698607,
  "name": "L.A. Paving Co., Inc., 1925",
  "url": "http://41.media.tumblr.com/83454d0e9cddfa5e9dcf2911ad9f803c/tumblr_n3q2xjrmvk1tq6tdto1_400.jpg",
  "thumbnail": "http://41.media.tumblr.com/83454d0e9cddfa5e9dcf2911ad9f803c/tumblr_n3q2xjrmvk1tq6tdto1_75sq.jpg"
}, {
  "lat": 34.06281904,
  "lng": -118.2809651,
  "name": "Buxton & Rosa, 1930",
  "url": "http://36.media.tumblr.com/e46918901ad4cc6547ea27233873e879/tumblr_n3q2pdzLXM1tq6tdto1_400.jpg",
  "thumbnail": "http://40.media.tumblr.com/e46918901ad4cc6547ea27233873e879/tumblr_n3q2pdzLXM1tq6tdto1_75sq.jpg"
}, {
  "lat": 34.06370117,
  "lng": -118.2967767,
  "name": "A. M. Concrete Inc., 1990",
  "url": "http://41.media.tumblr.com/634b3ebae1233626c427dbfc44b3261a/tumblr_n1m6xg3ik81tq6tdto1_400.jpg",
  "thumbnail": "http://41.media.tumblr.com/634b3ebae1233626c427dbfc44b3261a/tumblr_n1m6xg3ik81tq6tdto1_75sq.jpg"
}, {
  "lat": 34.05123715,
  "lng": -118.3195567,
  "name": "Atkinson–Spicer Co., 1926",
  "url": "http://40.media.tumblr.com/1db33e935ff486d74cbe35706fc9855a/tumblr_n2m0o6gcvY1tq6tdto1_400.jpg",
  "thumbnail": "http://36.media.tumblr.com/1db33e935ff486d74cbe35706fc9855a/tumblr_n2m0o6gcvY1tq6tdto1_75sq.jpg"
}, {
  "lat": 34.0696981,
  "lng": -118.3614635,
  "name": "Lew. Odell, 1937",
  "url": "http://36.media.tumblr.com/6737d1a172353dcd80bebe5b56d96150/tumblr_n2m20mOESy1tq6tdto1_400.jpg",
  "thumbnail": "http://41.media.tumblr.com/6737d1a172353dcd80bebe5b56d96150/tumblr_n2m20mOESy1tq6tdto1_75sq.jpg"
}, {
  "lat": 34.0707379,
  "lng": -118.3615279,
  "name": "Frank J. Heilmann, 1937",
  "url": "http://36.media.tumblr.com/1b5550f571e508a7a9ddc057ad07096c/tumblr_n2m24ceaF91tq6tdto1_400.jpg",
  "thumbnail": "http://40.media.tumblr.com/1b5550f571e508a7a9ddc057ad07096c/tumblr_n2m24ceaF91tq6tdto1_75sq.jpg"
}, {
  "lat": 34.06903154,
  "lng": -118.361485,
  "name": "Tryon & Brain, 1925",
  "url": "http://41.media.tumblr.com/58a45a711a9b39015fdb0601585e1b44/tumblr_n2m1viKp6v1tq6tdto1_400.jpg",
  "thumbnail": "http://41.media.tumblr.com/58a45a711a9b39015fdb0601585e1b44/tumblr_n2m1viKp6v1tq6tdto1_75sq.jpg"
}, {
  "lat": 34.07611449,
  "lng": -118.2561439,
  "name": "So. Calif. Gas Co., 1987",
  "url": "http://40.media.tumblr.com/8f7f0543d4f53f114fa866b57465380a/tumblr_n294lvcY9H1tq6tdto1_400.jpg",
  "thumbnail": "http://41.media.tumblr.com/8f7f0543d4f53f114fa866b57465380a/tumblr_n294lvcY9H1tq6tdto1_75sq.jpg"
}, {
  "lat": 34.09311068,
  "lng": -118.2675621,
  "name": "James Martin, 1925",
  "url": "http://40.media.tumblr.com/b4ff9e91abd2ba2d8242da9536aa412c/tumblr_n5c729VoJi1tq6tdto1_400.jpg",
  "thumbnail": "http://40.media.tumblr.com/b4ff9e91abd2ba2d8242da9536aa412c/tumblr_n5c729VoJi1tq6tdto1_75sq.jpg"
}, {
  "lat": 34.10834904,
  "lng": -118.3322972,
  "name": "Geo. A. Shepard, 1926",
  "url": "http://40.media.tumblr.com/tumblr_lu4gtf1ez31qex1i7o1_400.jpg",
  "thumbnail": "http://41.media.tumblr.com/tumblr_lu4gtf1ez31qex1i7o1_75sq.jpg"
}];

var photoLayer = L.photo.cluster().on('click', function(evt) {
  var photo = evt.layer.photo;
  var template = '{name}';
  evt.layer.bindPopup(L.Util.template(template, photo), {
    minWidth: 400
  }).openPopup();
});

photoLayer.add(photos).addTo(map);

Leaflet geotag

how to save user or any model through using relationship

User::where('id', $user->id)->first()->nanowrimosEmailStatsStatus()->save(new NanowrimosEmailStatsStatus(['StatsSent' => 1]));

Mixed Menus (drop-down + social) vuejs


  
                Mixed Menus (drop-down + social)
                
                    
                        
        Home
        
          Food
          
            Chef for Hire
            Catering
            Restaurant
          
        
        
          Classes
          
            Class Schedule
            Register
            Breakfast Class
            Brunch Class
            Lunch Class
            Dinner Class
            Dessert Class
            Baking Class
            Canning Class
            Shopping Class
            Tools Class
          
        
        About
          
            The Eat Story
            Meet the Chef
            Meet the Team
            Our Vendors
            Legal
          
        
        Contact
      
                    


                    
                        
                            Twitter
                            Facebook
                            LinkedIn
                            YouTube
                            Instagram

/* Styles for mixed menu (drop-down + social) */
.nav-mixed {
    display: flex;
    background: hsl(0, 0%, 15%);
    flex-wrap: wrap;
    justify-content: space-between;
}
@media screen and (max-width: 30em){
 .multi-level-nav ul ul li a {
  padding-left: 2em;
 }

 .dropdown-toggle {
  display: none;
 }
}

@media screen and (min-width: 30em){
 .multi-level-nav ul {
        display: flex;
        flex-wrap: wrap;
       
 } 

 .multi-level-nav li {
        flex: 1 0 auto;
  position: relative;
 }

 li.has-children > a {
  padding-right: 0;
 }

 .multi-level-nav ul ul {
  display: none;
  position: absolute;
  z-index:100;
 }

 .multi-level-nav ul ul li {
        flex: 1 1 auto;
 }

 .multi-level-nav ul .toggled-on {
  display: flex;
 }

 .dropdown-toggle {
  margin: 0;
  padding: 0 .5em;
  border: 0;
  font-family: 'FontAwesome';
  content: "";
  text-transform: lowercase; /* Stop screen readers to read the text as capital letters */
  background-color: transparent;
 }

 .dropdown-toggle:after {
  position: relative;
  top: 0;
  left: 0;
  width: 42px;
  color: white;
  content: "\f107";
  line-height: 1em; 
 }

 .dropdown-toggle:hover,
 .dropdown-toggle:focus {
  background: hsl(0, 0%, 25%);
 }

 .dropdown-toggle.toggle-on:after {
  content: "\f106";
 }
}
.social-menu li a:before {
  font-family: 'Fontawesome';
  -webkit-font-smoothing: antialiased;
  content: '\f08e';
}
 
.social-menu li a[href*="dribbble.com"]::before { content: '\f17d'; }
 
.social-menu li a[href*="facebook.com"]::before { content: '\f09a'; }
 
.social-menu li a[href*="flickr.com"]::before { content: '\f16e'; }
 
.social-menu li a[href*="foursquare.com"]::before { content: '\f180'; }
 
.social-menu li a[href*="github.com"]::before { content: '\f09b'; }
 
.social-menu li a[href*="plus.google.com"]::before { content: '\f0d5'; }
 
.social-menu li a[href*="instagram.com"]::before { content: '\f16d'; }
 
.social-menu li a[href*="jsfiddle.com"]::before { content: '\f1cc'; }
 
.social-menu li a[href*="linkedin.com"]::before { content: '\f0e1'; }
 
.social-menu li a[href*="pinterest.com"]::before { content: '\f0d2'; }
 
.social-menu li a[href*="reddit.com"]::before { content: '\f1a1'; }
 
.social-menu li a[href*="soundcloud.com"]::before { content: '\f1be'; }
 
.social-menu li a[href*="stackoverflow.com"]::before { content: '\f16c'; }
 
.social-menu li a[href*="tumblr.com"]::before { content: '\f173'; }
 
.social-menu li a[href*="twitter.com"]::before { content: '\f099'; }
 
.social-menu li a[href*="vimeo.com"]::before { content: '\f194'; }
 
.social-menu li a[href*="vine.co"]::before { content: '\f1ca'; }
 
.social-menu li a[href*="yelp.com"]::before { content: '\f1e9'; }
 
.social-menu li a[href*="youtube.com"]::before { content: '\f167'; }
 
.social-menu li a[href*="wordpress.com"]::before { content: '\f19a'; }
 
/* Flexbox stuff */
 
.social-menu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}
 
/* Base styles that apply to all menus */
.menu-section {
  padding-bottom: 2em;
  margin-bottom: 2em;
  border-bottom: 1px solid hsl(0, 0%, );
}
 
.menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  background: hsl(0, 0%, 15%);
}
 
.menu li a {
  display: block;
  text-decoration: none;
  color: white;
  padding: .6em 1em;
}
 
.menu li a:hover {
  background: hsl(0, 0%, 25%);
}


new Vue({
  el:'#app',
  data: {
    toggleOnOff: false,
    selected: 'food'
  },
  computed:{
    onToggle(){
      return {'on-toggle':this.toggleOnOff}
    },
    subMenu(){
      return this.toggleOnOff === true  ? 'toggled-on' : false
    },
    ariaExpanded(){
      return !this.toggleOnOff ? 'true' : 'false'
    }
  },
  methods:{
    toggleOn(selected){
      this.selected = selected 
      this.toggleOnOff = !this.toggleOnOff
    }
  }
})

social menu



  
  
    
      Twitter
      Facebook
      LinkedIn
      YouTube
      Instagram

.social-menu li a:before {
  font-family: 'Fontawesome';
  -webkit-font-smoothing: antialiased;
  content: '\f08e';
}

.social-menu li a[href*="dribbble.com"]::before { content: '\f17d'; }

.social-menu li a[href*="facebook.com"]::before { content: '\f09a'; }

.social-menu li a[href*="flickr.com"]::before { content: '\f16e'; }

.social-menu li a[href*="foursquare.com"]::before { content: '\f180'; }

.social-menu li a[href*="github.com"]::before { content: '\f09b'; }

.social-menu li a[href*="plus.google.com"]::before { content: '\f0d5'; }

.social-menu li a[href*="instagram.com"]::before { content: '\f16d'; }

.social-menu li a[href*="jsfiddle.com"]::before { content: '\f1cc'; }

.social-menu li a[href*="linkedin.com"]::before { content: '\f0e1'; }

.social-menu li a[href*="pinterest.com"]::before { content: '\f0d2'; }

.social-menu li a[href*="reddit.com"]::before { content: '\f1a1'; }

.social-menu li a[href*="soundcloud.com"]::before { content: '\f1be'; }

.social-menu li a[href*="stackoverflow.com"]::before { content: '\f16c'; }

.social-menu li a[href*="tumblr.com"]::before { content: '\f173'; }

.social-menu li a[href*="twitter.com"]::before { content: '\f099'; }

.social-menu li a[href*="vimeo.com"]::before { content: '\f194'; }

.social-menu li a[href*="vine.co"]::before { content: '\f1ca'; }

.social-menu li a[href*="yelp.com"]::before { content: '\f1e9'; }

.social-menu li a[href*="youtube.com"]::before { content: '\f167'; }

.social-menu li a[href*="wordpress.com"]::before { content: '\f19a'; }

/* Flexbox stuff */

.social-menu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Base styles that apply to all menus */
.menu-section {
  padding-bottom: 2em;
  margin-bottom: 2em;
  border-bottom: 1px solid hsl(0, 0%, );
}

.menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  background: hsl(0, 0%, 15%);
}

.menu li a {
  display: block;
  text-decoration: none;
  color: white;
  padding: .6em 1em;
}

.menu li a:hover {
  background: hsl(0, 0%, 25%);
}

var input = document.getElementById('Files'); var files = input.files; for(var i = 0; i < files.length; i++) { var file = files[0]; var reader = new FileReader; // use HTML5 file reader to get the file reader.onloadend = function () { // get EXIF data var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result)); var lat = exif.GPSLatitude; var lon = exif.GPSLongitude; //Convert coordinates to WGS84 decimal var latRef = exif.GPSLatitudeRef || "N"; var lonRef = exif.GPSLongitudeRef || "W"; lat = (lat[0] + lat[1]/60 + lat[2]/3600) * (latRef == "N" ? 1 : -1); lon = (lon[0] + lon[1]/60 + lon[2]/3600) * (lonRef == "W" ? -1 : 1); //Send the coordinates to your map Map.AddMarker(lat,lon); } reader.readAsBinaryString(file); }

https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=fl_featureCollection

【Vuej 2】 navigation single menu change flexbox vuejs

Justify Content


 
  
    
      Home
      Food
      Classes
      Recipes
      News
      About
      Contact
    
  

  

  Justify Content
  
    
      {{value}}

input[type=radio]:checked + label {
  color: blue;
  border: 2px dotted black;
}
/* Base styles that apply to all menus */

body{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
.menu-section {
  padding-bottom: 2em;
  margin-bottom: 2em;
  border-bottom: 1px solid hsl(0, 0%, );
}

.menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  background: hsl(0, 0%, 15%);
}

.menu li a {
  display: block;
  text-decoration: none;
  color: white;
  padding: .6em 1em;
}

.menu li a:hover {
  background: hsl(0, 0%, 25%);
}



/* Styles for Single Level Menu */

@media screen and (min-width: 30em) {
  
  .single-nav ul {
    display: flex;
  }
  
}

new Vue({
  el: '#app',
  data:{
    message: 'message',
    selected: 'flex-start',
    justifyContentProperty: [
      "flex-start",
      "flex-end",
      "center",
      "space-between",
      "space-around",
      "initial"
    ]
  },
  computed:{
    justifyContent: function(){
      return {justifyContent: this.selected}
    }
  }
})

vuejs

ecommerce Vuejs

Material flex header

https://codepen.io/z-/pen/QdbZjy?limit=all&page=4&q=flex

Quick start:

<script src="http://cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>

Also install thru npm, bower or CDN.

Declarative API demo:

var burst = new Burst({
    radius:   { 15: 50 }
    children: {
      fill:   [ 'deeppink', 'cyan', 'orange' ],
  }
});

Edward Lance Lorilla

onsen

vuejs leaflet example

flexbox card view layout

Flexbox Demo: Card Layouts

{{article.title}}

geotagg

Leaflet geotag

how to save user or any model through using relationship

Mixed Menus (drop-down + social) vuejs

Mixed Menus (drop-down + social)

Mixed Menus (drop-down + social)

social menu

【Vuej 2】 navigation single menu change flexbox vuejs

Justify Content

Justify Content

vuejs

Speech Example

ecommerce Vuejs

Material flex header

New follower on Substack

Contact Form

Report Abuse