I am getting an error for the first ui-sref inside div with class="row episode-link" although the rest work correctly:
Syntax Error: Token '}' not a primary expression at column 12 of the expression [{seriesId: }] starting at [}].
The same ui-sref if put anywhere in the rest of the html structure works perfectly.
Unable to track the bug. Please Help.
<section>
<div class="container-fluid">
<div class="row episode-link">
<a ui-sref="app.episode({seriesId: {{show._id}}})">
<div class="col-md-12 guide">
<span class="fa fa-chevron-right" style="float: right;"></span>
<h5>Episode Guide</h5>
<p>{{episodes.length}} episodes</p>
</div>
</a>
</div>
<div class="row">
<div class="col-md-12">
<div class="seriesjumbo jumbotron">
<div class="row">
<div class="col-md-4 show-img-div align-items-center">
<img class="show-img" src="{{show.poster}}" alt="{{show.seriesName}}">
</div>
<div class="col-md-8">
<h1>{{show.seriesName}}</h1>
<p class="episode-info"><i class="fa fa-calendar" aria-hidden="true"></i><span>{{show.firstAired | date: 'mm/dd/yyyy'}}</span></p>
<p class="info">{{show.network}} <span class="rating"><i class="fa fa-star fa-lg star" aria-hidden="true"></i> {{show.rating}}</span></p>
<p class="info"><em>{{show.airsDayOfWeek}}s, {{show.airsTime}} GMT </em></p>
<div class="cap">
<span class="label label-default" ng-repeat="genre in show.genre">{{genre}}</span>
</div>
<div class="menus"><span class="fa fa-list"></span></div>
<div class="menus"><span class="fa fa-heart"></span></div>
<div class="bookmark"><span class="fa fa-bookmark"></span></div>
<div class="menus"><span class="fa fa-star"></span></div>
<div>
<h3>Overview </h3>
<p>{{show.overview}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<uib-tabset active="active">
<uib-tab index="0" heading="Episodes">
<div class="row">
<div class="col-md-6">
<h5>Seasons</h5>
<ul class="season-list">
<li ng-repeat="season in seasons | orderBy: '-valueOf()'"><a ui-sref="app.episode({seriesId: {{show._id}}, season: {{season}}})">{{season}}</a></li>
</ul>
</div>
<div class="col-md-6">
<h5>Years</h5>
<ul class="season-list">
<li ng-repeat="year in firstAired | orderBy:'-toString()'"><a ui-sref="app.episode({seriesId: {{show._id}}, year: {{year}}})">{{year}}</a></li>
</ul>
</div>
</div>
</uib-tab>
<uib-tab index="1" heading="Fan Arts">
<div ui-view="fan_arts"></div>
</uib-tab>
</div>
</div>
</div>
</section>
Related
I tried to add so that the admin can this connected in / login and that when he connects alone he has access 127.0.0.1:8000/dashboard/home and only him has access
welcome.blade.php
```
<div class="row">
<div class="col-lg-8">
<div class="row">
#if (count($categories) > 0)
#foreach ($categories as $category)
<div class="col-lg-12">
<!-- second section -->
<a href="{{route('category.overview', $category->id)}}">
<h4 class="text-white bg-info mb-0 p-4 rounded-top">
{{$category->title}}
</h4>
</a>
<table
class="table table-striped table-responsive table-bordered">
<thead class="thead-light">
<tr>
<th scope="col">Forum</th>
<th scope="col">Topics</th>
<!-- <th scope="col">Posts</th>
<th scope="col">Latest Post</th> -->
</tr>
</thead>
<tbody>
#if (count($category->forums) > 0)
#foreach ($category->forums as $forum)
<tr>
<td>
<h3 class="h5">
{{$forum->title}}
</h3>
<p class="mb-0">
{!!$forum->desc!!}
</p>
</td>
<td><div>{{$forum->discussions->count()}}</td>
</tr>
#endforeach
#else
<p> 0 Forums found in this category</p>
#endif
</tbody>
</table>
</div>
#endforeach
#else
<h1>No Forum categories found</h1>
#endif
</div>
</div>
<div class="col-lg-4">
<aside>
<div class="card">
<div class="card-body">
<h4 class="card-title">Members Online</h4>
<ul class="list-unstyled mb-0">
#if (count($users_online) > 0)
#foreach ($users_online as $user)
<span class="badge badge-pill badge-primary">{{$user->name}}</span>
#endforeach
#endif
</ul>
</div>
<div class="card-footer">
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Members Statistics</h4>
<dl class="row">
<dt class="col-8 mb-0">Total Categories:</dt>
<dd class="col-4 mb-0">{{$totalCategories}}</dd>
</dl>
<dl class="row">
<dt class="col-8 mb-0">Total Forums:</dt>
<dd class="col-4 mb-0">{{$forumsCount}}</dd>
</dl>
<dl class="row">
<dt class="col-8 mb-0">Total Topics:</dt>
<dd class="col-4 mb-0">{{$topicsCount}}</dd>
</dl>
<dl class="row">
<dt class="col-8 mb-0">Total members:</dt>
<dd class="col-4 mb-0">{{$totalMembers}}</dd>
</dl>
</div>
<div class="card-footer">
<div>Newest Member</div>
<div>{{$newest->name}}</div>
</div>
</div>
</aside>
</div>
</div>
</div>
```
dashboard.blade.php
``` <body>
<section id="container" class="">
#include('admin.header')
<aside>
<div id="sidebar" class="nav-collapse">
<ul class="sidebar-menu">
<li class="active">
<a class="" href="/dashboard/home">
<i class="icon_house_alt"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;" class="">
<i class="fa fa-edit"></i>
<span>Actions</span>
<span class="menu-arrow arrow_carrot-right"></span>
</a>
<ul class="sub">
<li><a class="" href="{{route('category.new')}}">Create Category</a></li>
<li><a class="" href="{{route('forum.new')}}">Create Forum</a></li>
</ul>
</li>
<li>
<a class="" href="/dashboard/users">
<i class="fa fa-users"></i>
<span>Users</span>
</a>
</li>
<li>
<a class="" href="{{route('categories')}}">
<i class="fa fa-users"></i>
<span>Categories</span>
</a>
</li>
<li>
<a class="" href="{{route('forums')}}">
<i class="fa fa-users"></i>
<span>Forums</span>
</a>
</li>
</ul>
</div>
</aside>
<div id="app">
#yield('content')
</div>
</section>
{{-- ckeditor --}}
<script>
CKEDITOR.replace( 'editor1' );
</script>
<script>
$(function() {
$(".knob").knob({
'draw': function() {
$(this.i).val(this.cv + '%')
}
})
});
$(document).ready(function() {
$("#owl-slider").owlCarousel({
navigation: true,
slideSpeed: 300,
paginationSpeed: 400,
singleItem: true
});
});
$(function() {
$('select.styled').customSelect();
});
$(function() {
$('#map').vectorMap({
map: 'world_mill_en',
series: {
regions: [{
values: gdpData,
scale: ['#000', '#000'],
normalizeFunction: 'polynomial'
}]
},
backgroundColor: '#eef3f7',
onLabelShow: function(e, el, code) {
el.html(el.html() + ' (GDP - ' + gdpData[code] + ')');
}
});
});
```
ressource/views/admin/pages/home.blade.php
```
<section id="main-content">
<section class="wrapper">
<div class="row">
<div class="col-lg-12">
<h3 class="page-header"><i class="fa fa-laptop"></i> Dashboard</h3>
<ol class="breadcrumb">
<li><i class="fa fa-home"></i>Home</li>
<li><i class="fa fa-laptop"></i>Dashboard</li>
</ol>
</div>
</div>
<div class="flash-message">
#if(\Session::has('message'))
<p class="alert
{{ Session::get('alert-class', 'alert-success') }}">{{Session::get('message') }}</p>
#endif
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="info-box blue-bg">
<i class="fa fa-cloud-download"></i>
#if ($categories->count() > 0)
<div class="count">{{$categories->count()}}</div>
#else
<div class="count">0</div>
#endif
<div class="title">Categories</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="info-box brown-bg">
<i class="fa fa-users"></i>
#if ($users->count() > 0)
<div class="count">{{$users->count()}}</div>
#else
<div class="count">0</div>
#endif
<div class="title">Users</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="info-box dark-bg">
<i class="fa fa-question"></i>
#if ($forums->count() > 0)
<div class="count">{{$forums->count()}}</div>
#else
<div class="count">0</div>
#endif
<div class="title">Forums</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="info-box green-bg">
<i class="fa fa-comment"></i>
#if ($topics->count() > 0)
<div class="count">{{$topics->count()}}</div>
#else
<div class="count">0</div>
#endif
<div class="title">Topics</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h2><i class="fa fa-flag-o red"></i><strong>Registered Users</strong></h2>
<div class="panel-actions">
<i class="fa fa-rotate-right"></i>
<i class="fa fa-chevron-up"></i>
<i class="fa fa-times"></i>
</div>
</div>
<div class="panel-body">
<table class="table bootstrap-datatable countries">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Rank</th>
<th>View</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
#if (count($users)> 0)
#foreach ($users as $user)
<tr>
<td>{{$user->name}}</td>
<td>{{$user->email}}</td>
<td>{{$user->rank}}</td>
<td><i class="fa fa-eye text-success"></i></td>
<td><form action="{{ route('user.delete', ['id' => $user->id]) }}" method="POST" >
#csrf
<input type="submit" class="btn btn-sm btn-danger" value="Delete">
</form></td>
</tr>
#endforeach
#endif
</tbody>
</table>
{{ $users->links() }}
</div>
</div>
</div>
</div>
</div>
</section>
</section>
#endsection ```
home.blade.php
``` #extends('layouts.app')
#section('content')
<section class="content">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="card card-primary card-outline">
<div class="card-body box-profile">
<div class="text-center">
<img class="profile-user-img img-fluid img-circle" src="{{asset('/images/profile.png')}}" alt="User profile picture">
</div>
<h3 class="profile-username text-center">{{auth()->user()->name}}</h3>
<p class="text-muted text-center">{{auth()->user()->telegram}}<span class="badge badge-success">{{auth()->user()->skills}}</span></p>
<ul class="list-group list-group-unbordered mb-3">
<li class="list-group-item">
<b>Joined</b></br>
<b>Last seen</b></br>
<b>Reaction score</b></br>
<b>Total sell</b></br>
<b>Total purchase</b></br>
<b>Messages</b> <a class="float-right">{{count(auth()->user()->topics)}}</a>
</li>
{{-- <li class="list-group-item">
<b>Following</b> <a class="float-right">543</a>
</li>
<li class="list-group-item">
<b>Friends</b> <a class="float-right">13,287</a>
</li> --}}
</ul>
</div>
</div>
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">About Me</h3>
</div>
<div class="card-body">
{{auth()->user()->education}}
</br>Contact tg : {{auth()->user()->telegram}}
</div>
</div>
</div>
<div class="col-md-9">
<div class="card">
<div class="card-header p-2">
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link active" href="#activity" data-toggle="tab">Latest activity</a></li>
<li class="nav-item"><a class="nav-link" href="#timeline" data-toggle="tab">Timeline</a></li>
<li class="nav-item"><a class="nav-link" href="#settings" data-toggle="tab">Settings</a></li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="active tab-pane" id="activity">
<div class="post">
<div class="user-block">
<img class="img-circle img-bordered-sm" width="5%" src="{{asset('/images/profile.png')}}" alt="user image">
<span class="username">
{{auth()->user()->name}}
<i class="fas fa-times"></i>
</span>
<span class="description">Shared publicly - {{$latest->created_at}}</span>
</div>
#if ($latest_user_post)
<p>
{{$latest_user_post->desc}}
</p>
#else
<p>
You have not started any discussion yet
</p>
#endif
{{-- <p>
<i class="fas fa-share mr-1"></i> Share
<i class="far fa-thumbs-up mr-1"></i> Like
<span class="float-right">
<a href="#" class="link-black text-sm">
<i class="far fa-comments mr-1"></i> Comments (5)
</a>
</span>
</p>
<input class="form-control form-control-sm" type="text" placeholder="Type a comment"> --}}
</div>
<div class="post clearfix">
<div class="user-block">
<img class="img-circle img-bordered-sm" width="5%" src="{{asset('/images/profile.png')}}" alt="User Image">
<span class="username">
{{$latest->user->name}}
<i class="fas fa-times"></i>
</span>
<span class="description">Started a discussion - {{$latest->created_at}}</span>
</div>
#if ($latest)
<p>
{!!$latest->desc!!}
</p>
#else
<p>
You have not started any discussion yet
</p>
#endif
{{-- <form class="form-horizontal">
<div class="input-group input-group-sm mb-0">
<input class="form-control form-control-sm" placeholder="Response">
<div class="input-group-append">
<button type="submit" class="btn btn-danger">Send</button>
</div>
</div>
</form> --}}
</div>
</div>
<div class="tab-pane" id="timeline">
</div>
<div class="tab-pane" id="settings">
<form action="{{route('user.update', auth()->id())}}" method="POST" class="form-horizontal">
#csrf
<div class="form-group row">
<label for="inputEducation" class="col-sm-2 col-form-label">About you</label>
<div class="col-sm-10">
<textarea type="text" value="{{auth()->user()->education}}" class="form-control" name="education" id="inputEducation" placeholder="{{auth()->user()->education}}"></textarea>
</div>
</div>
<div class="form-group row">
<label for="inputSkills" class="col-sm-2 col-form-label">Skills</label>
<div class="col-sm-10">
<input type="text" value="{{auth()->user()->skills}}" class="form-control" name="skills" id="inputSkills" placeholder="Skills">
</div>
</div>
<div class="form-group row">
<div class="offset-sm-2 col-sm-10">
```
web.php
use Illuminate\Support\Facades\Route;
Route::get('/', 'App\Http\Controllers\FrontendController#index');
Auth::routes();
Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
Route::get('/new-topic', function () {
return view('client.new-topic');
});
Route::get('/category/overview/{id}', 'App\Http\Controllers\FrontendController#categoryOverview')->name('category.overview');
Route::get('/forum/overview/{id}', 'App\Http\Controllers\FrontendController#forumOverview')->name('forum.overview');
Route::get('dashboard/home', 'App\Http\Controllers\DashboardController#home');
Route::get('dashboard/category/new', 'App\Http\Controllers\CategoryController#create')->name('category.new');
Route::post('dashboard/category/new', 'App\Http\Controllers\CategoryController#store')->name('category.store');
Route::get('dashboard/categories', 'App\Http\Controllers\CategoryController#index')->name('categories');
Route::get('dashboard/categories/{id}', 'App\Http\Controllers\CategoryController#show')->name('category');
Route::get('dashboard/categories/edit/{id}', 'App\Http\Controllers\CategoryController#edit')->name('category.edit');
Route::post('dashboard/categories/edit/{id}', 'App\Http\Controllers\CategoryController#update')->name('category.update');
Route::get('dashboard/categories/delete/{id}', 'App\Http\Controllers\CategoryController#destroy')->name('category.destroy');
Route::get('dashboard/forum/new', 'App\Http\Controllers\ForumController#create')->name('forum.new');
Route::post('dashboard/forum/new', 'App\Http\Controllers\ForumController#store')->name('forum.store');
Route::get('dashboard/forums', 'App\Http\Controllers\ForumController#index')->name('forums');
Route::get('dashboard/forums/{id}', 'App\Http\Controllers\ForumController#edit')->name('forum');
Route::get('dashboard/forums/edit/{id}', 'App\Http\Controllers\ForumController#edit')->name('forum.edit');
Route::post('dashboard/forums/update/{id}', 'App\Http\Controllers\ForumController#update')->name('forum.update');
Route::get('dashboard/forums/delete/{id}', 'App\Http\Controllers\ForumController#destroy')->name('forum.destroy');
Route::get('client/topic/new/{id}', 'App\Http\Controllers\DiscussionController#create')->name('topic.new');
Route::post('client/topic/new', 'App\Http\Controllers\DiscussionController#store')->name('topic.store');
Route::get('client/topic/{id}', 'App\Http\Controllers\DiscussionController#show')->name('topic');
Route::post('client/topic/reply/{id}', 'App\Http\Controllers\DiscussionController#reply')->name('topic.reply');
Route::get('/topic/reply/delete/{id}', 'App\Http\Controllers\DiscussionController#destroy')->name('reply.delete');
Route::get('/updates', 'App\Http\Controllers\DiscussionController#updates');
Route::post('user/update/{id}', 'App\Http\Controllers\UserController#update')->name("user.update");
Route::get('/dashboard/users/{id}', 'App\Http\Controllers\DashboardController#show');
Route::post('/dashboard/users/{id}', 'App\Http\Controllers\DashboardController#destroy')->name('user.delete');
Route::prefix('admin')->group(function() {
Route::get('/login','Auth\AdminLoginController#showLoginForm')->name('admin.login');
Route::post('/login', 'Auth\AdminLoginController#login')->name('admin.login.submit');
Route::get('logout/', 'Auth\AdminLoginController#logout')->name('admin.logout');
Route::get('/', 'Auth\AdminController#index')->name('admin.dashboard');
}) ;
UserController
``` <?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
class UserController extends Controller
{
public function update(Request $request, $id)
{
$input = $request->all();
$user = User::find($id);
$user->fill($input)->save();
toastr()->success('Your details have been updated successfully!');
return back();
}
}
```
HomeController
``` <?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Discussion;
class HomeController extends Controller
{
/**
* Create a new controller instance.
*
* #return void
*/
public function __construct()
{
$this->middleware('auth');
}
/**
* Show the application dashboard.
*
* #return \Illuminate\Contracts\Support\Renderable
*/
public function index()
{
$latest_user_post = Discussion::where('user_id', auth()->id())->latest()->first();
$latest = Discussion::latest()->first();
return view('home', compact('latest_user_post', 'latest'));
}
}
```
But since I made his page 127.0.0.1:8000/dashboard/home is white and I have errors when I create an account I have a first error:
Trying to get property 'user' of non-object (View: /home/project/Pictures/forum/resources/views/home.blade.php)
if I comment it I have another error that appears it is this:
Trying to get property 'created_at' of non-object (View: /home/project/Pictures/forum/resources/views/home.blade.php)
Etc... I have had errors like this since I tried to make only the admin can this connect to the dashboard. I am a beginner I do not know how to adjust it, I am not sure I also have a route error. I tried to follow different tutorial on google to learn laravel until it was okay, if someone can help me and explain the problem it would be kind.
I have to build a shoppinglist where I can add and delete lists.
On the right side there is the currently opened list with the list headline.
When deleting a list, the headline should disappear, but it doesn´t, neither with empty(), nor remove() or text(' ').
I just edited the post so you can see the whole HTML code
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<div id="shoppinglist">
<div class="header left">
<h2>Listen</h2>
<i class="glyphicon glyphicon-plus newList" ></i>
</div>
<ul class="list lists">
<!-- -->
</ul>
</div>
</div>
<div class="col-sm-8">
<div class="header right">
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-menu-hamburger"></i>
<img src="img/profile.png" alt="profilbild">
</div>
<div id="listbody">
<div class="listheader">
<!--<h1>List 1</h1>-->
</div>
<div id="listitems">
<div class="items_container">
<!-- -->
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div id="categorylist">
<div class="header">
<h2>Kategorien</h2>
</div>
<ul class="list categories">
<!-- -->
</ul>
</div>
</div>
<div class="col-sm-8">
<div class="header">
<input placeholder="Was willst du Einkaufen?" type="text" />
</div>
<div id="categoryitems">
<div class="items_container">
<!-- -->
</div>
</div>
</div>
</div>
<div id="producthover_container">
<div id='producthover'>
<div id='producthover_icon'>
<i class='glyphicon glyphicon-plus'></i>
</div>
<div id='producthover_detail'>
<span>Details <br> hinzufügen</span>
</div>
</div>
</div>
</div>
list.js:
printHeader(){
$(".listheader").empty();
$(".listheader").append("<h1 class='h1header'>" + this.name + "</h1>");
}
shoppinglist.js:
$(".lists").on("click","i",(e) =>{
let r = confirm("Delete?");
if(r) {
$(".h1header").remove();
$(e.target).parent().remove();
}
});
you have to Remove it from the parent node. like this:
var child = $(".h1header");
$(".listheader").removeChild(child);
or you will have to create a function that does this when given a child node
I'm working with cached pages, I wrote all pages in a single file index.html.
How to add the side panel to a particular page?
index.html
<body>
<div class="statusbar-overlay"></div>
<div class="views">
<div class="view view-main">
<!-- Navbar -->
<div class="navbar no-border">
<div class="navbar-inner">
<div class="left"></div>
<div class="center sliding">Welcome to Page</div>
<div class="right"></div>
</div>
<div class="navbar-inner cached" data-page="detailsPage">
<div class="left sliding">
<a href="index" class="link back">
<i class="icon icon-back"></i><span>Back</span>
</a>
</div>
<div class="center sliding">Detail page</div>
<div class="right"></div>
</div>
<div class="navbar-inner cached" data-page="loginPage">
<div class="left sliding">
<a href="index" class="link back">
<i class="icon icon-back"></i><span>Back</span>
</a>
</div>
<div class="center sliding">Login</div>
<div class="right"></div>
</div>
<div class="navbar-inner cached" data-page="registerPage">
<div class="left sliding">
<a href="index" class="link back">
<i class="icon icon-back"></i><span>Back</span>
</a>
</div>
<div class="center sliding">Register</div>
<div class="right"></div>
</div>
<div class="navbar-inner cached" data-page="welcome">
<div class="left sliding">
<!-- <a href="index" class="link back">
<i class="icon icon-back"></i><span>Back</span>
</a> -->
</div>
<div class="center sliding">Realmilk</div>
<div class="right"></div>
</div>
</div>
<!-- Pages -->
<div class="pages navbar-through toolbar-through">
<!-- Page 1 -->
<div data-page="index" class="page" ng-controller="IndexPageController">
<!-- Page content-->
<div class="page-content">
Realmilk Login
Register Here
</div>
</div>
<!-- Page 2 -->
<div data-page="detailsPage" class="page cached" ng-controller="DetailPageController">
<!-- Page content-->
<div class="page-content">
This is page 2
</div>
</div>
<!-- Welcome Page-->
<div data-page="welcome" class="page cached" ng-controller="WelcomePageController">
<!-- Page content-->
<div class="page-content">
<div class="card">
<div class="card-content">
<div class="card-content-inner">Welcome to the Realmilk :: {{user_info.firstName}}</div>
</div>
</div>
<style>
.demo-card-header-pic .card-header {
height: 40vw;
background-size: cover;
background-position: center;
}
</style>
<div class="card demo-card-header-pic">
<div style="background-image:url(http://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif)" valign="bottom" class="card-header color-white no-border">Journey To Mountains</div>
<div class="card-content">
<div class="card-content-inner">
<p class="color-gray">Enrolled on January 21, 2015</p>
<p>Molabanti Dairy farm is RealMilk certified cattle farm.</p>
</div>
</div>
<div class="card-footer">
Like
Read more
</div>
</div>
</div>
</div>
<!-- Login Page -->
<div data-page="loginPage" class="page cached" ng-controller="LoginPageController">
<!-- Page content-->
<div class="page-content">
<form id="login-form" class="list-block">
<div class="item-content">
<div class="item-inner">
<div class="item-title label">Email</div>
<div class="item-input">
<input type="email" name="emailId" id="emailId" placeholder="Enter Email" ng-model="user.emailId">
</div>
</div>
</div>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">Password</div>
<div class="item-input">
<input type="password" name="password" id="password" placeholder="Enter Password" ng-model="user.password">
</div>
</div>
</div>
</form>
<div class="content-block">
<p>Sign In</p>
</div>
</div>
</div>
<!-- Registration Page -->
<div data-page="registerPage" class="page cached" ng-controller="RegisterPageController">
<!-- Page content-->
<div class="page-content">
<form id="registration-form" class="list-block">
<ul>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">persons</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Gender</div> -->
<div class="item-input">
<select id="boom" name="type" ng-model="user.type">
<option value="Retailer">Consumer</option>
<option value="Dairyfarm">Farmer</option>
</select>
</div>
</div>
</div>
</li>
<!-- Text inputs -->
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">person</i></div>
<div class="item-inner">
<!-- <div class="item-title label">First Name</div> -->
<div class="item-input">
<input type="text" name="first_name" placeholder="First name" ng-model="user.first_name">
</div>
</div>
</div>
</li>
<!-- Text inputs -->
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">person</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Last Name</div> -->
<div class="item-input">
<input type="text" placeholder="Last name">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">phone</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Phone</div> -->
<div class="item-input">
<input type="tel" id="phone" name="primary_mobile_number" placeholder="Phone" ng-model="user.primary_mobile_number"/>
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">email</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Email</div> -->
<div class="item-input">
<input type="email" name="email_id" id="email_id" placeholder="Enter Email" ng-model="user.email_id">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">lock</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Password</div> -->
<div class="item-input">
<input type="password" id="password" name="password" placeholder="Password" ng-model="user.password"/>
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">lock</i></div>
<div class="item-inner">
<!-- <div class="item-title label">Password</div> -->
<div class="item-input">
<input type="password" id="confirmpassword" name="confirmpassword" placeholder="Confirm Password" ng-model="user.confirmpassword"/>
</div>
</div>
</div>
</li>
</ul>
</form>
<div class="content-block">
<p>Register</p>
</div>
</div>
</div>
</div>
</div>
</div>
According to what I see from the documentation.
Add this html syntax after: <div class="statusbar-overlay"></div> or before: <div class="views">...</div>.
CODE SYNTAX:
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>Left Panel content here</p>
<p>Close me</p>
<p>Open Right Panel</p>
</div>
</div>
Ok, now when you have panels in your App, you need to know how to open/close them:
To open panel we need to add "open-panel" class to any HTML element (prefered to link)
To close panel we need to add "close-panel" class to any HTML element (prefered to link)
If you have two panels in app, such link will open/close Left panel by default
If you want to specify which panel should opened/closed, then it could be done via additional data-panel="left" attribute on this HTML element
Open Panels With Swipe
To make this feature works you need to enable it on App initialization by passing related parameter:
var myApp = new Framework7({
swipePanel: 'left'
});
<template id="players-template">
<div v-for="player in players" v-bind:class="{ 'row': $index == 0}">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
{{ player.username }}
<span class="small pull-right">{{ player.createdAt }}</span>
</h3>
</div>
<div class="panel-body">
<img alt="" class="img-circle center-block">
</div>
<div class="panel-footer">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<span class="glyphicon glyphicon-envelope"></span>
<span class="glyphicon glyphicon-user"></span>
<span class="glyphicon glyphicon-option-horizontal"></span>
</div>
</div>
</div>
</div>
</div>
I want to end the div with class of row each third element and then append new row. How can I use if conditions ?
<div id="app" class="container">
<div v-for="player in players">
<div class="row" v-if="($index + 1) % 3 == 0 ">
{{$index + 1}}
</div>
</div>
</div>
$index is a special variable inside v-for
http://vuejs.org/guide/list.html#v-for
I think I figured this out
<template id="players-template">
<div class="row">
<template v-for="player in players">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
{{ player.username }}
<span class="small pull-right">{{ player.createdAt }}</span>
</h3>
</div>
<div class="panel-body">
<img alt="" class="img-circle center-block">
</div>
<div class="panel-footer">
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<span class="glyphicon glyphicon-envelope"></span>
<span class="glyphicon glyphicon-user"></span>
<span class="glyphicon glyphicon-option-horizontal"></span>
</div>
</div>
</div>
</div>
<template v-if="($index + 1) % 3 == 0 ">
</div><div class="row">
</template>
</template>
</div>
</template>
The trick is opening a row before the loop, then closing it afterwards. But, after every third player, we close the row and open a new one. This will result in one row for every three players.
In most cases however, this isn't necessary - bootstrap would know to bring each set of three to a new row because you used col-md-4
I'm working on this site here. http://opennetsummit.wpengine.com/
The three images in the second section down trigger the bootstrap collapse function on click. I'd like them to show on hover, and hide when not hovering.
What do I need to change?
<script>
$(".paneltab1").hover(
function() {
$('#collapsePanel1').collapse('show');
}, function() {
$('#collapsePanel1').collapse('hide');
}
);
</script>
<div class="row panel-heading">
<div class="container">
<div class="col-xs-3">
<a class="paneltab1" data-toggle="collapse" href="#collapsePanel1" aria-expanded="false" aria-controls="collapsePanel1">
<div class="panel-tabs">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-rocket-icon.png">
<h3>Workshops</h3>
</div>
</a>
</div>
<div class="col-xs-3 ">
<a class="" data-toggle="collapse" href="#collapsePanel2" aria-expanded="false" aria-controls="collapsePanel2">
<div class="panel-tabs">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-circles-icon.png">
<h3>Open Networking Summit</h3>
</div>
</a>
</div>
<div class="col-xs-3 ">
<a class="" data-toggle="collapse" href="#collapsePanel3" aria-expanded="false" aria-controls="collapsePanel3">
<div class="panel-tabs">
<div>
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
<h3>Webinars</h3>
</div>
</div>
</a>
</div>
<div class="col-xs-3 ">
<div class="panel-tabs">
<div class="mid-form">
<h3>Get Updates</h3>
</div>
</div>
</div>
</div>
</div>
<div class="collapse" id="collapsePanel1">
<div class="row">
<div class="container">
<div class="col-xs-12 hompage-panel">
<div class="col-sm-4 center">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
</div>
<div class="col-sm-8">
<h2>Defy Protocol </h2>
<h1>EMBRACE {OPEN} SOFTWARE</h1>
<h3>Open Networking Summit</h3>
<hr>
<p>June 15 - 18, 2015</p>
<p>Santa Clara Convention Center</p>
More Information
</div>
</div>
</div>
</div>
</div>
<div class="collapse" id="collapsePanel2">
<div class="row">
<div class="container">
<div class="col-xs-12 hompage-panel">
<div class="col-sm-4 center">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
</div>
<div class="col-sm-8">
<h2>Panel 2 </h2>
<h1>EMBRACE {OPEN} SOFTWARE</h1>
<h3>Open Networking Summit</h3>
<hr>
<p>June 15 - 18, 2015</p>
<p>Santa Clara Convention Center</p>
More Information
</div>
</div>
</div>
</div>
</div>
<div class="collapse" id="collapsePanel3">
<div class="row">
<div class="container">
<div class="col-xs-12 hompage-panel">
<div class="col-sm-4 center">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
</div>
<div class="col-sm-8">
<h2>Panel 3 </h2>
<h1>EMBRACE {OPEN} SOFTWARE</h1>
<h3>Open Networking Summit</h3>
<hr>
<p>June 15 - 18, 2015</p>
<p>Santa Clara Convention Center</p>
More Information
</div>
</div>
</div>
</div>
You can use jquery's hover along with bootstrap's collapse javascript, something like this:
$(".panel-tabs").hover(
function() {
$('#collapsePanel3').collapse('show');
}, function() {
$('#collapsePanel3').collapse('hide');
}
);
The first function(){} is for when the mouse enters, the second for when it leaves.
More info here:
http://api.jquery.com/hover/
http://getbootstrap.com/javascript/#collapse-methods
I changed the class from "collapse" to "collapse in" on mouseover and from "collapse in" to "collapse" on mouseout using GetElementbyID and it worked fine.
document.getElementById("panelid").className = "collapse in";