I created a simple login page using ionic framework in Html.
<html>
<head>
<title>Login ionic form</title>
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.0.0- beta.9/css/ionic.css">
<meta name="viewport" content="width=device-width, user-scalable=no, minimal-ui">
</head>
<body>
<div class="bar bar-header bar-stable">
<h1 class="title">Welcome!</h1>
</div>
<div class="content has-header padding">
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Username">
</label>
<label class="item item-input">
<input type="password" placeholder="Password">
</label>
</div>
<button class="button button-block button-positive">
Log In
</button>
<div class="row" align="center">
<div class="col col-50"><button class="button button-light">Forgot Pass? </button></div>
<div class="col col-50"><button class="button button-light"> Sign UP </button></div>
</div>
</div>
</body>
</html>
But when i convert it to HAML and run it with sinatra with thin i get formatting issues. The issue being it cuts off the bottom buttons.
I have no clue where to look or understand why this is happening.
!!!
%html
%head
%title Login ionic form
%link{href: "http://code.ionicframework.com/1.0.0-beta.9/css/ionic.css", rel: "stylesheet", type: "text/css"}/
%meta{content: "width=device-width, user-scalable=no, minimal-ui", name: "viewport"}/
%body
.bar.bar-header.bar-stable
%h1.title Welcome!
.content.has-header.padding
.list.list-inset
%label.item.item-input
%input{placeholder: "Username", type: "text"}/
%label.item.item-input
%input{placeholder: "Password", type: "password"}/
%button.button.button-block.button-positive
Log In
.row{align: "center"}
.col.col-50
%button.button.button-light Forgot Pass?
.col.col-50
%button.button.button-light Sign UP
My current "stack" is
sinatra
haml
thin-server / have tried both development and production
my server "app"
%w[sinatra haml].each{|gem| require gem}
get '/' do
haml :index
end
HAML
HTML
HAML pastebin
http://pastebin.com/embed_js.php?i=sQ5Pc1YK
HTML pastebin
http://pastebin.com/embed_js.php?i=DP4rSx31
had to add some style: "padding-top: xxpx; padding-top: xxpx;" in places. I guess something is still broken somewhere. It looks fine and all but I feel robbed because I thought everything would format correctly when i converted from HTML > HAML.
Related
So I have started a spring boot project. The HTML loads fine, however, thyme-leaf seems to have trouble loading static files. The two files are in packages such as static.css and static.js. I get an ERR_ABORTED:404 error for loading both files and can not figure out why.
I have already tried changing the path (as suggested in other similar questions) to something like #{css/styles.css} instead of #{/css/styles.css} but that did not work.
Does anyone know if I'm missing something here?
Below is the HTML file:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" th:href="#{/css/styles.css}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bg-img">
<div class="content">
<header>Login Form</header>
<form action="#">
<div class="field">
<span class="fa fa-user"></span>
<input type="text" required placeholder="Email or Phone">
</div>
<div class="field space">
<span class="fa fa-lock"></span>
<input type="password" class="pass-key" required placeholder="Password">
<span class="show">SHOW</span>
</div>
<div class="pass">
Forgot Password?
</div>
<div class="field">
<input type="submit" value="LOGIN">
</div>
</form>
<div class="login">Or login with</div>
<div class="links">
<div class="facebook">
<i class="fab fa-facebook-f"><span>Facebook</span></i>
</div>
<div class="instagram">
<i class="fab fa-instagram"><span>Instagram</span></i>
</div>
</div>
<div class="signup">Don't have account?
Signup Now
</div>
</div>
</div>
<script type="text/javascript" th:src="#{/js/loginscript.js}"></script>
</body>
where is your css folder?
css, js should be in static folder
src
main
java
resources
static
css
i18n
img
js
templates
Add this in your head tag:
<link rel="stylesheet" href="../static/css/styles.css" type="text/css" th:href="#{/styles.css}">
Note: Above code will only work if styles.css present in below path:
|--resources
|--static
|--css
|--styles.css
This is here for anyone who finds this, it turns out for the th:href property, I had to give the full path as th:href="#{../static/css/styles.css}". Thanks to everyone who answered!
i recently learning about Laravel using vue...
I'm using Laravel 5.8,
Bulma 0.7.5,
Buefy 0.8.1, and
Vue
My issue is that when I'm logged-out the Buefy CSS works fines but ones I log-in, it stops working...
Here's are a few screenshots so you can see what I'm talking about...
Here's what it looks like when I'm logged-out
https://imgur.com/inOTzgv
and here's what it looks like when I'm log-in
https://imgur.com/Qgq52d4
Here's my app.js
require('./bootstrap');
window.Vue = require('vue');
import Buefy from 'buefy';
Vue.use(Buefy);
var app = new Vue({
el: '#app',
data() {
return {
auto_password: true,
password_options: 'keep'
}
}
});
and here's
My cpanel.blade.php
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'EthicallySpeaking') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">-->
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
#yield('styles')
</head>
<body>
<div id="app">
#include('inc.navbar')
#include('inc.messages')
#include('inc.side_navbar_cpanel')
<div id="app" class="cpanel-dashboard-area flex-container">
#yield('content')
</div>
</div>
#yield('scripts')
</body>
</html>
and here's the edit.php form that I'm having the issue with...
#extends('layouts.cpanel')
#section('content')
<section class="section">
<div class="container">
<div class="columns m-l-10">
<div class="column is-10">
<h1 class="title">Edit User Profile</h1>
</div><!-- end column is-10 -->
</div><!-- end columns -->
<hr/>
<div class="columns">
<div class="column">
<form action="{{route('users.update', $user->id)}}" method="POST">
{{method_field ('PUT')}}
{{csrf_field()}}
<div class="field">
<label for="name" class="label">Name</label>
<p class="control">
<input type="text" class="input" name="name" id="name" value="{{$user->name}}">
</p>
</div>
<div class="field">
<label for="email" class="label">Email</label>
<p class="control">
<input type="text" class="input" name="email" id="email" value="{{$user->email}}">
</p>
</div>
<div class="field">
<label for="password" class="label">Password</label>
<div class="field">
<b-radio v-model="password_options" native-value="keep" name="permission_type">Do Not Change Password</b-radio>
</div>
<div class="field">
<b-radio v-model="password_options" native-value="auto" name="permission_type">Auto-Generate New Password</b-radio>
</div>
<div class="field">
<b-radio v-model="password_options" native-value="manual" name="permission_type">Manually Set New Password</b-radio>
<p class="control">
<input type="text" class="input" name="password" id="password" v-if="password_options == 'manual'" placeholder="Manually give a password to this user">
</p>
</div>
</div>
<button class="button is-success m-t-20">Edit User</button>
</form>
</div><!-- end column is-10 -->
</div><!-- end columns -->
</div><!-- end container -->
</section>
#endsection
I wanted to know if anyone know why this is happing?
I'm new to Laravel and i'm not quite sure yet how everything works. I'm trying to break appart code into various sections by including the begining of the page, and then create a hero section followed by some html in that page.
Everything shows but the html code that is on the page is rendering on top of everything else.
This thread looked like it could be things not being closed but as i see it everything is working as it should
Including header in wrong place Laravel 4
#include('blocks/scripts')
#extends('blocks/hero')
#section('title')
text here
#stop
#section('subtitle')
another text
#stop
<div class="container">
<div class="row">
<div class="col-12">
more text
</div>
<div class="col-6">
<h2 class="text-center">header</h2>
<p class="text-center">more text</p>
</div>
<div class="col-6">
<h2 class="text-center">header</h2>
<p class="text-center">more text</p>
</div>
</div>
</div>
#include('blocks/footer')
This is the file. The HTML block is being rendered right after the "scripts", followed by "footer" and then it shows the "hero".
The order should be scripts->hero->html->footer
#include('blocks/scripts') just has html code
#extends('blocks/hero') has #yield('title') and #yield('subtitle')
#include('blocks/footer') just text
I changed the names of some templates because it is difficult to understand the code what you put in the comments. But I think it can help you to organize your code.
The template where you have the html, head and body tags, is not a template to be included, but to extend other templates from it, and make use of a yield. For example #yield ('main-content'):
blocks/main.blade.php:
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
#yield('main-content')
</body>
</html>
blocks/hero.blade.php
This is a template that you could extends from the main one and adding content to the #yield('main-content') with #section('main-content'):
#extends('blocks/main')
#section('main-content')
<div class="container-fuid mx-0 wlgx_hero">
<div class="row">
<div class="col-12">
#include('blocks/header')
<section id="hero_text">
<h1 class="text-center text-white py-5">
#yield('title')
</h1>
<hr class="purple_line pb-3">
<section id="subtitle">
<p class="text-center">
#yield('subtitle')
</p>
</section>
</section>
</div>
</div>
</div>
#yield('hero-content')
#endsection('main-content')
The blade in your question (I don't know the name) can, in turn, extends from hero, and fill their yields:
#extends('blocks/hero')
#section('title')
text here
#stop
#section('subtitle')
another text
#stop
#section('hero-content')
<div class="container">
<div class="row">
<div class="col-12">
more text
</div>
<div class="col-6">
<h2 class="text-center">header</h2>
<p class="text-center">more text</p>
</div>
<div class="col-6">
<h2 class="text-center">header</h2>
<p class="text-center">more text</p>
</div>
</div>
</div>
#stop
The last one is the view that you have to return from a route or controller, so that everything works.
Hope it's help
In blade files, every direct HTML outside of #section('something') will be rendered at the top of the file.
You need to put #yield('something') in the extended file then wrap your HTML code with #section('something') and #endsection('something') like what you do with title and subtitle.
I am trying to display an individual item from the list generating in ng-repeat by clicking on selected item and rendering in a different div. These are the files.
http://plnkr.co/edit/4bnlJnhSHqY1mSPeYOcz?p=preview
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properities -->
<title>Homepage Example - Semantic</title>
<link rel="stylesheet" type="text/css" href="../dist/semantic.css">
<link rel="stylesheet" type="text/css" href="homepage.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<script src="../dist/semantic.js"></script>
<script src="homepage.js"></script>
<script src="app.js"></script>
</head>
<body id="homebased" ng-controller="MyController">
<div class="ui two divided column padded grid">
<div class="six wide column">
<h2>Six Wide Column</h2>
<form action="ui form">
<div class="two fields">
<div class="field">
<div class="ui action left icon input">
<i class="search icon"></i>
<input type="text" placeholder="Start typing..." ng-model="q">
<div class="ui teal button">
<i class="large arrow right icon"></i></div>
</div>
</div>
<div class="ui hidden divider"></div>
<div class="field">
<label>Filter by..</label>
<div class="ui selection dropdown small">
<input type="hidden" name="name">
<div class="default text">filter</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="name">Author</div>
<div class="item" data-value="year">Year</div>
</div>
</div>
<div name="stp">{{records.indexOf(item)}}</div>
</div>
</form>
</div>
</div>
<div class="ten wide column">
<h2>Search Results</h2>
<div class="ui segment right">
<a class="ui teal left ribbon label">N= {{records.length}}</a>
<div class="ui selection list">
<div class="item" ng-repeat="item in records | filter: q">
<a href="#stp {{records.indexOf(item)}}"><div class="content" >
<div class="header">{{item.name}}</div>
<div class="description">Correspondence begun in: {{item.start}}</div>
</div></a>
</div>
</div>
</div> <!--list-->
</div>
</div>
</body>
</html>
APP.JS
var myApp = angular.module('myApp', ['firebase']);
myApp.controller("MyController", ["$scope", "$firebaseArray", function($scope, $firebaseArray) {
var ref = new Firebase('https://simpleform.firebaseio.com/records');
$scope.records = $firebaseArray(ref);
$scope.recordOrder = 'name';
}]);
I would advise you to dig around ui-router: https://github.com/angular-ui/ui-router
You define views, you define routing then your items access to the other view by using ui-sref="myitem({id: item.id})" and you're all set up!
I was facing performance problem while switching between the pages.I went to various forums and added something like faskclick and more.
First time, when i switch to different page, it takes around 3-4 seconds but from second time it is fast e.g. 1 - 1.5 sec. Now, sometimes, click does not work. Out of 5 clicks, only 2-3 clicks works. I am struggling to figure out what went wrong ?
If you can help me out finding why click is not working and how to improve performance when using jquery mobile, it would really be helpful. Following are my code snippets
<html>
<!-- head -->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0" />
<title>Project</title>
<link rel="stylesheet" href="StyleSheet/jquery.mobile-1.3.0.css" />
<script src="StyleSheet/jquery-1.8.2.min.js"></script>
<script src="StyleSheet/jquery.mobile-1.3.0.js"></script>
<script src="StyleSheet/fastclick.js"></script>
<script type="application/javascript">
$.mobile.defaultPageTransition = 'none';
$.mobile.transitionFallbacks.slideout = 'none';
window.addEventListener('load', function() {
new FastClick(document.body);
}, false);
$( document ).bind( "mobileinit", function() {
$.mobile.buttonMarkup.hoverDelay = 500
});
</script>
</head>
<body>
<div id="container">
<div data-role="page" id="HomePage" class="jqm-demos">
<div class="ui-body ui-body-b">
CLick Me to go second page
</div>
</div>
<div data-role="page" id="SecondPage" class="jqm-demos">
<div class="ui-body ui-body-b">
<br> CLick Me to go first page
<div id="JQM" data-theme="b" data-content-theme="c"
data-role="collapsible" data-collapsed-icon="arrow-d"
data-expanded-icon="arrow-u">
<h3>
<span style="float: left;"> JQM is very slow </span> <a
href="#JQM_1" class="splitButtonClicked" data-rel="popup"> <span
style="float: right;"
class="ui-btn-up-b ui-btn-corner-all ui-icon ui-icon-arrow-r2"></span>
</a>
</h3>
<p>I sther any way so that page transition should happen just
like native applciation when using JQM ? Botton click also also
sometimes not responsive.</p>
</div>
</div>
<!-- content -->
<!-- footer -->
<div data-role="footer" data-theme="b" data-tap-toggle="false"
data-position="fixed">
<!--class="ui-bar ui-bar-b"-->
<a href="#" data-rel="back" data-role="button" data-icon="arrow-l"
data-iconpos="notext" class="ui-btn-left" data-theme="b">left</a>
<center>
<a href="#HomePage" data-role="button" data-icon="home"
data-iconpos="notext" data-theme="b">Home</a>
</center>
<a href="#" data-role="button" data-icon="arrow-r"
data-iconpos="notext" class="ui-btn-right" data-theme="b">Right</a>
</div>
<!-- /footer -->
</div>
</div>
</body>
</html>