master
Skylar Ittner 4 years ago
parent 1d3570ffd3
commit 113f2d4d08

@ -19,19 +19,20 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
.no-tablet {
display: none;
}
/*
.page.tabbed .tabbar {
/* Remove tab switcher at bottom of page */
Remove tab switcher at bottom of page
display: none;
height: 0;
}
.page.tabbed .tabs {
/* Put tabs next to each other */
Put tabs next to each other
display: flex;
}
.page.tabbed .tabs .tab {
/* un-hide "non-active" tabs */
un-hide "non-active" tabs
display: block;
/* Make FABs stay where they should */
Make FABs stay where they should
position: relative;
}
.page.tabbed .tabs .tab.tab-67 {
@ -43,33 +44,33 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
.page.tabbed .page-content {
padding-top: 0;
padding-bottom: 0;
}
}*/
.elevation-tablet {
/* .elevation-3 */
box-shadow: var(--f7-elevation-3)!important;
}
/*
.page.tabbed .tabs .tab:not(:first-child) {
/*box-shadow: inset 5px 0 9px -5px rgba(0,0,0,0.3);*/
box-shadow: inset 5px 0 9px -5px rgba(0,0,0,0.3);
border-left: 1px solid rgba(0,0,0,0.1);
}
}*/
/*
.page.tabbed .fab {
margin-bottom: 0;
}
.sheet-backdrop.backdrop-in {
visibility: hidden;
}
}*/
.padding-bottom-tablet {
padding-bottom: 3rem !important;
}
/*
#mapbox {
height: calc(100% - var(--f7-navbar-height));
}
}*/
}
@media all and (min-width: 768px) and (min-height: 700px) {

@ -12,7 +12,7 @@ var app = new Framework7({
root: "#app",
name: "Lecte",
id: "vote.lecte.Lecte",
theme: "md",
theme: "ios",
card: {
swipeToClose: false
},
@ -159,4 +159,4 @@ function setAnimations(enabled) {
applyColorTheme();
setAnimations();
router.navigate("/discover");
router.navigate("/ranking");

@ -0,0 +1,27 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
function setTabSwipable() {
var page = $(".page[data-name=discover]");
// If the page has grown larger, refresh to disable swiping tabs
if (page.width() >= 768 && $(".tabs-swipeable-wrap")[0]) {
router.refreshPage();
} else if (page.width() < 768 && !$(".tabs-swipeable-wrap")[0]) {
router.refreshPage();
}
}
$(window).on('resize', setTabSwipable);
setTabSwipable();
// Adjust the map when opening its tab
$(".view-main").on("click", ".tab-link#map-tab-link", function () {
var center = map.getCenter();
map.resize();
map.setCenter(center);
});

@ -15,6 +15,7 @@
<link rel="stylesheet" href="node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css" />
<link rel="stylesheet" href="node_modules/leaflet.locatecontrol/dist/L.Control.Locate.min.css" />
<link rel="stylesheet" href="node_modules/mapbox-gl/dist/mapbox-gl.css">
<link rel="stylesheet" href="node_modules/framework7-icons/css/framework7-icons.css" />
<link rel="stylesheet" href="assets/css/app.css" />
<link rel="stylesheet" href="assets/css/backdrop.css" />
<link rel="stylesheet" href="assets/css/oled.css" />
@ -24,9 +25,7 @@
<script src="cordova.js"></script>
<div id="app" class="color-theme-green">
<div class="view view-main"></div>
</div>
<script src="node_modules/framework7/js/framework7.bundle.min.js"></script>

@ -7,23 +7,45 @@
<div class="navbar no-tablet">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<!-- <div class="left">
<a class="link" onclick="router.back({force: true, ignoreCache: true})">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
</div>
<div class="title">Discover</div>
</div> -->
<div class="title">Lecte</div>
</div>
</div>
<div class="toolbar tabbar toolbar-bottom">
<div class="toolbar tabbar toolbar-top">
<div class="toolbar-inner">
<a href="#ranking-tab" class="tab-link tab-link-active">Ranking</a>
<a href="#ranking-tab" class="tab-link tab-link-active">Top</a>
<a href="#map-tab" id="map-tab-link" class="tab-link">Map</a>
</div>
</div>
<div class="toolbar toolbar-bottom">
<div class="toolbar-inner">
<a href="#tab-1" class="tab-link tab-link-active">
<!-- Different icons for iOS and MD themes -->
<i class="icon f7-icons if-not-md">list_number</i>
<i class="icon material-icons md-only">poll</i>
<!-- Label text -->
<span class="tabbar-label">Rankings</span>
</a>
<a href="#tab-2" class="tab-link">
<i class="icon f7-icons if-not-md">today_fill<span class="badge color-red">5</span></i>
<i class="icon material-icons md-only">today<span class="badge color-red">5</span></i>
<span class="tabbar-label">Calendar</span>
</a>
<a href="#tab-3" class="tab-link">
<i class="icon f7-icons if-not-md">cloud_fill</i>
<i class="icon material-icons md-only">file_upload</i>
<span class="tabbar-label">Upload</span>
</a>
</div>
</div>
{{#if nottablet}}
<div class="tabs-swipeable-wrap">
{{/if}}

@ -0,0 +1,47 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<div class="page tabbed" data-name="main">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="title">Lecte</div>
</div>
</div>
<div class="toolbar tabbar tabbar-labels toolbar-bottom">
<div class="toolbar-inner">
<a href="/" data-route-tab-id="ranking-tab" class="tab-link">
<i class="icon f7-icons if-not-md">list_number</i>
<i class="icon material-icons md-only">poll</i>
<!-- Label text -->
<span class="tabbar-label">Ranking</span>
</a>
<a href="/map" data-route-tab-id="map-tab" class="tab-link">
<i class="icon f7-icons if-not-md">location</i>
<i class="icon material-icons md-only">near_me</i>
<span class="tabbar-label">Map</span>
</a>
<a href="/myprofile" data-route-tab-id="myprofile-tab" class="tab-link">
<i class="icon f7-icons if-not-md">person_circle</i>
<i class="icon material-icons md-only">account_circle</i>
<span class="tabbar-label">Profile</span>
</a>
</div>
</div>
<div class="tabs tabs-routable">
<div class="tab page-content" id="ranking-tab"></div>
<div class="tab page-content" id="map-tab"></div>
<div class="tab page-content" id="myprofile-tab"></div>
</div>
<script>
$("#map-tab").on("tab:mounted", function () {
reloadMap();
});
</script>
</div>

@ -0,0 +1,3 @@
<div class="card">
<div class="card-content card-content-padding"></div>
</div>

@ -0,0 +1,4 @@
<div id="mapbox"></div>
<script>
reloadMap();
</script>

@ -0,0 +1,131 @@
<div class="row">
<div class="col-100 medium-50 large-33">
<div class="card">
<div class="card-content row no-gap align-items-stretch">
<div class="col-15 small-10 display-flex justify-content-center align-items-center">
<div style="font-size: 140%; color: rgba(0,0,0,0.5);">+1</div>
</div>
<div class="col-85 small-90 padding" style="border-left: 1px solid rgba(0,0,0,0.1);">
wre ghre iog
</div>
</div>
</div>
</div>
<div class="col-100 medium-50 large-33">
<div class="card">
<div class="card-content row no-gap align-items-stretch">
<div class="col-15 small-10 display-flex justify-content-center align-items-center">
<div style="font-size: 140%; color: rgba(0,0,0,0.5);">+1</div>
</div>
<div class="col-85 small-90 padding" style="border-left: 1px solid rgba(0,0,0,0.1);">
wre ghre iog
</div>
</div>
</div>
</div>
<div class="col-100 medium-50 large-33">
<div class="card">
<div class="card-content row no-gap align-items-stretch">
<div class="col-15 small-10 display-flex justify-content-center align-items-center">
<div style="font-size: 140%; color: rgba(0,0,0,0.5);">+1</div>
</div>
<div class="col-85 small-90 padding" style="border-left: 1px solid rgba(0,0,0,0.1);">
wre ghre iog
</div>
</div>
</div>
</div>
<div class="col-100 medium-50 large-33">
<div class="card">
<div class="card-content row no-gap align-items-stretch">
<div class="col-15 small-10 display-flex justify-content-center align-items-center">
<div style="font-size: 140%; color: rgba(0,0,0,0.5);">+1</div>
</div>
<div class="col-85 small-90 padding" style="border-left: 1px solid rgba(0,0,0,0.1);">
wre ghre iog
</div>
</div>
</div>
</div>
<div class="col-100 medium-50 large-33">
<div class="card">
<div class="card-content row no-gap align-items-stretch">
<div class="col-15 small-10 display-flex justify-content-center align-items-center">
<div style="font-size: 140%; color: rgba(0,0,0,0.5);">+1</div>
</div>
<div class="col-85 small-90 padding" style="border-left: 1px solid rgba(0,0,0,0.1);">
wre ghre iog
</div>
</div>
</div>
</div>
<div class="col-100 medium-50 large-33">
<div class="card">
<div class="card-content row no-gap align-items-stretch">
<div class="col-15 small-10 display-flex justify-content-center align-items-center">
<div style="font-size: 140%; color: rgba(0,0,0,0.5);">+1</div>
</div>
<div class="col-85 small-90 padding" style="border-left: 1px solid rgba(0,0,0,0.1);">
wre ghre iog
</div>
</div>
</div>
</div>
<div class="col-100 medium-50 large-33">
<div class="card">
<div class="card-content row no-gap align-items-stretch">
<div class="col-15 small-10 display-flex justify-content-center align-items-center">
<div style="font-size: 140%; color: rgba(0,0,0,0.5);">+1</div>
</div>
<div class="col-85 small-90 padding" style="border-left: 1px solid rgba(0,0,0,0.1);">
wre ghre iog
</div>
</div>
</div>
</div>
<div class="col-100 medium-50 large-33">
<div class="card">
<div class="card-content row no-gap align-items-stretch">
<div class="col-15 small-10 display-flex justify-content-center align-items-center">
<div style="font-size: 140%; color: rgba(0,0,0,0.5);">+1</div>
</div>
<div class="col-85 small-90 padding" style="border-left: 1px solid rgba(0,0,0,0.1);">
wre ghre iog
</div>
</div>
</div>
</div>
<div class="col-100 medium-50 large-33">
<div class="card">
<div class="card-content row no-gap align-items-stretch">
<div class="col-15 small-10 display-flex justify-content-center align-items-center">
<div style="font-size: 140%; color: rgba(0,0,0,0.5);">+1</div>
</div>
<div class="col-85 small-90 padding" style="border-left: 1px solid rgba(0,0,0,0.1);">
wre ghre iog
</div>
</div>
</div>
</div>
<div class="col-100 medium-50 large-33">
<div class="card">
<div class="card-content row no-gap align-items-stretch">
<div class="col-15 small-10 display-flex justify-content-center align-items-center">
<div style="font-size: 140%; color: rgba(0,0,0,0.5);">+1</div>
</div>
<div class="col-85 small-90 padding" style="border-left: 1px solid rgba(0,0,0,0.1);">
wre ghre iog
</div>
</div>
</div>
</div>
</div>

@ -0,0 +1,9 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<div class="list no-margin-top col-100 medium-80 large-50 elevation-tablet">
<ul>
<li>grfklg renkgjedn gkerth</li>
</ul>
</div>

@ -5,6 +5,28 @@
*/
var routes = [
{
path: "/",
name: "main",
url: "pages/main.html",
tabs: [
{
path: '/',
id: 'ranking-tab',
url: "pages/tabs/ranking.html"
},
{
path: '/map',
id: 'map-tab',
url: "pages/tabs/map.html"
},
{
path: '/myprofile',
id: 'myprofile-tab',
url: "pages/tabs/myprofile.html"
}
]
},
{
path: '/welcome',
name: 'welcome',
@ -15,25 +37,6 @@ var routes = [
name: 'profile',
templateUrl: "pages/profile.html"
},
{
path: '/discover',
name: 'discover',
async: function (routeTo, routeFrom, resolve, reject) {
let tablet = $(window).width() >= 768;
resolve({
templateUrl: "pages/discover.html"
}, {
context: {
nottablet: !tablet
}
})
},
on: {
pageAfterIn: function () {
reloadMap();
}
}
},
{
path: '/settings',
name: 'settings',

@ -36,7 +36,10 @@ var SETTINGS = {
"user_latitude", "user_longitude",
"lastsync", "lastchange"
],
geocodeapi: "https://api.lecte.vote/geocode.php",
geocodeapi: "http://localhost/lecteapi/geocode.php",
geoipapi: "https://api.lecte.vote/geoip.php",
loginurl: "https://auth.lecte.vote/login/"
// geocodeapi: "https://api.lecte.vote/geocode.php",
// loginurl: "https://auth.lecte.vote/login/"
}

Loading…
Cancel
Save