I have a list showing stores on a page, upon clicking each store, corresponding categories and products are shown on a lists in another page. Stores, categories and products are displayed using Api calls.I am getting everything correct, but while navigating back and forth many times between store page and product page,Getting this error:
Newtonsoft.Json.JsonReaderException: Unexpected character encountered
while parsing value: <. Path '', line 0, position 0.
Using breakpoint, not able to see the source of exception. How to handle this exception?
Edit: I am getting this html just before exception
<!doctype html>
<html lang="en">
<head>
<title>Too Many Requests</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<!-- Styles -->
<style>
html {
line-height: 1.15;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
header,
nav,
section {
display: block;
}
figcaption,
main {
display: block;
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
strong {
font-weight: inherit;
}
strong {
font-weight: bolder;
}
code {
font-family: monospace, monospace;
font-size: 1em;
}
dfn {
font-style: italic;
}
svg:not(:root) {
overflow: hidden;
}
button,
input {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
button,
input {
overflow: visible;
}
button {
text-transform: none;
}
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
legend {
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
[type="checkbox"],
[type="radio"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
menu {
display: block;
}
canvas {
display: inline-block;
}
template {
display: none;
}
[hidden] {
display: none;
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: sans-serif;
}
*,
*::before,
*::after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
p {
margin: 0;
}
button {
background: transparent;
padding: 0;
}
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
*,
*::before,
*::after {
border-width: 0;
border-style: solid;
border-color: #dae1e7;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
border-radius: 0;
}
button,
input {
font-family: inherit;
}
input::-webkit-input-placeholder {
color: inherit;
opacity: .5;
}
input:-ms-input-placeholder {
color: inherit;
opacity: .5;
}
input::-ms-input-placeholder {
color: inherit;
opacity: .5;
}
input::placeholder {
color: inherit;
opacity: .5;
}
button,
[role=button] {
cursor: pointer;
}
.bg-transparent {
background-color: transparent;
}
.bg-white {
background-color: #fff;
}
.bg-teal-light {
background-color: #64d5ca;
}
.bg-blue-dark {
background-color: #2779bd;
}
.bg-indigo-light {
background-color: #7886d7;
}
.bg-purple-light {
background-color: #a779e9;
}
.bg-no-repeat {
background-repeat: no-repeat;
}
.bg-cover {
background-size: cover;
}
.border-grey-light {
border-color: #dae1e7;
}
.hover\:border-grey:hover {
border-color: #b8c2cc;
}
.rounded-lg {
border-radius: .5rem;
}
.border-2 {
border-width: 2px;
}
.hidden {
display: none;
}
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.items-center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.justify-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.font-sans {
font-family: Nunito, sans-serif;
}
.font-light {
font-weight: 300;
}
.font-bold {
font-weight: 700;
}
.font-black {
font-weight: 900;
}
.h-1 {
height: .25rem;
}
.leading-normal {
line-height: 1.5;
}
.m-8 {
margin: 2rem;
}
.my-3 {
margin-top: .75rem;
margin-bottom: .75rem;
}
.mb-8 {
margin-bottom: 2rem;
}
.max-w-sm {
max-width: 30rem;
}
.min-h-screen {
min-height: 100vh;
}
.py-3 {
padding-top: .75rem;
padding-bottom: .75rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.pb-full {
padding-bottom: 100%;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.pin {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.text-black {
color: #22292f;
}
.text-grey-darkest {
color: #3d4852;
}
.text-grey-darker {
color: #606f7b;
}
.text-2xl {
font-size: 1.5rem;
}
.text-5xl {
font-size: 3rem;
}
.uppercase {
text-transform: uppercase;
}
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.tracking-wide {
letter-spacing: .05em;
}
.w-16 {
width: 4rem;
}
.w-full {
width: 100%;
}
#media (min-width: 768px) {
.md\:bg-left {
background-position: left;
}
.md\:bg-right {
background-position: right;
}
.md\:flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.md\:my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.md\:min-h-screen {
min-height: 100vh;
}
.md\:pb-0 {
padding-bottom: 0;
}
.md\:text-3xl {
font-size: 1.875rem;
}
.md\:text-15xl {
font-size: 9rem;
}
.md\:w-1\/2 {
width: 50%;
}
}
#media (min-width: 992px) {
.lg\:bg-center {
background-position: center;
}
}
</style>
</head>
<body class="antialiased font-sans">
<div class="md:flex min-h-screen">
<div class="w-full md:w-1/2 bg-white flex items-center justify-center">
<div class="max-w-sm m-8">
<div class="text-black text-5xl md:text-15xl font-black">
429 </div>
<div class="w-16 h-1 bg-purple-light my-3 md:my-6"></div>
<p class="text-grey-darker text-2xl md:text-3xl font-light mb-8 leading-normal">
Sorry, you are making too many requests to our servers. </p>
<a href="http://beta.cybasetech.com/hotcool">
<button class="bg-transparent text-grey-darkest font-bold uppercase tracking-wide py-3 px-6 border-2 border-grey-light hover:border-grey rounded-lg">
Go Home
</button>
</a>
</div>
</div>
<div class="relative pb-full md:flex md:pb-0 md:min-h-screen w-full md:w-1/2">
<div style="background-image: url('/svg/403.svg');" class="absolute pin bg-cover bg-no-repeat md:bg-left lg:bg-center">
</div>
</div>
</div>
</body>
</html>
The server is returning an error because you are making too many requests. You should check the response code of your HTTP request, if it is not 200 then do not attempt to parse it. You may also want to try caching some of your data locally so you are not repeatedly requesting the same data from the server.
Related
I am using laravel version 9 for doing my project. and there is a feature that needs to let the user export the event ticket. I try to use the package barryvdh/laravel-dompdf . right now I encounter the error of
Call a member function get_cellmap() on null
I tried to read others' posts with a similar issue, but I found out most of them are using the for the view so seems like the solution working for them is not appropriate for me.here is my code :
controller
public function GenerateTicket($id)
{
$tickets = GiftGivingBeneficiaries::where('gift_giving_id', $id)->get();
# Retrieve the last batch no. from the gift giving.
$batch_no = GiftGiving::findOrFail($id)->batch_no;
GiftGiving::findOrFail($id)->update([
'last_downloaded_by' => Auth::id(),
'batch_no' => $batch_no + 1,
]);
$pdf = PDF::loadView('charity.gifts.generate_ticket', compact('tickets'));
return $pdf->download('event_tickets.pdf');
}
View Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from bootdey.com #bootdey on twitter -->
<!-- All snippets are MIT license http://bootdey.com/license -->
<title>Genearate Ticket</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<section class="container">
<h1>Event Tickets</h1>
#foreach ($tickets as $key=> $ticket)
<table>
</table>
<div class="row">
<input type="hidden" value="{{$key + 1}} ">
<article class="card fl-left">
<section class="date">
<time datetime="23th feb">
<span>Ticket No.</span><br>
<span>{{ $ticket->ticket_no }}</span>
</time>
</section>
<section class="card-cont">
<small>Event Name:{{ $ticket->GiftGiving->name }}</small>
<h3>{{ $ticket->name }}</h3>
<div class="even-date">
<i class="fa fa-calendar"></i>
<time>
<span>{{ $ticket->GiftGiving->start_at }}</span>
</time>
</div>
<div class="even-info">
<i class="fa fa-map-marker"></i>
<p>
{{ $ticket->GiftGiving->venue }}
</p>
</div>
Batch No.{{ $ticket->GiftGiving->batch_no }}
</section>
</article>
</div>
#if ( $key == 5 )
<div style="page-break-before:always;"> </div>
#endif
#endforeach
</div>
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Oswald');
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box
}
body {
background-color: #dadde6;
font-family: arial
}
.fl-left {
float: left
}
.fl-right {
float: right
}
h1 {
text-transform: uppercase;
font-weight: 900;
border-left: 10px solid #fec500;
padding-left: 10px;
margin-bottom: 30px
}
.row {
overflow: hidden
}
.card {
display: table-row;
width: 100%;
background-color: #fff;
color: #989898;
margin-bottom:20px;
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
border-radius: 4px;
position: relative;
border: #2b2b2b 1px solid;
}
.card+.card {
margin-left: 2%
}
.date {
display: table-cell;
width: 45%;
position: relative;
text-align: center;
border-right: 2px dashed #dadde6
}
.date:before,
.date:after {
content: "";
display: block;
width: 30px;
height: 30px;
background-color: #DADDE6;
position: absolute;
top: -15px;
right: -15px;
z-index: 1;
border-radius: 50%
}
.date:after {
top: auto;
bottom: -15px
}
.date time {
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
.date time span {
display: block
}
.date time span:first-child {
color: #2b2b2b;
font-weight: 600;
font-size: 150%
}
.date time span:last-child {
text-transform: uppercase;
font-weight: 600;
margin-top: -10px
}
.card-cont {
display: table-cell;
width: 75%;
font-size: 100%;
padding: 10px 10px 30px 50px
}
.card-cont h3 {
color: #3C3C3C;
font-size: 130%
}
.row:last-child .card:last-of-type .card-cont h3 {
text-decoration: line-through
}
.card-cont>div {
display: table-row
}
.card-cont .even-date i,
.card-cont .even-info i,
.card-cont .even-date time,
.card-cont .even-info p {
display: table-cell
}
.card-cont .even-date i,
.card-cont .even-info i {
padding: 5% 5% 0 0
}
.card-cont .even-info p {
padding: 30px 50px 0 0
}
.card-cont .even-date time span {
display: block
}
.card-cont a {
display: block;
text-decoration: none;
width: 80px;
height: 30px;
background-color: #D8DDE0;
color: #fff;
text-align: center;
line-height: 30px;
border-radius: 2px;
position: absolute;
right: 10px;
bottom: 10px
}
.row:last-child .card:first-child .card-cont a {
background-color: #037FDD
}
.row:last-child .card:last-child .card-cont a {
background-color: #F8504C
}
#media screen and (max-width: 860px) {
.card {
display: block;
float: none;
width: 50%;
margin-bottom: 10px
}
.card+.card {
margin-left: 0
}
.card-cont .even-date,
.card-cont .even-info {
font-size: 75%
}
}
.page-break {
page-break-after: always;
}
</style>
<script type="text/javascript">
</script>
</body>
</html>
also, this is what my view looks like. Hope to know what part did I miss for it,every answer is highly appreciated.
Not sure if this will help but the way I execute this in my app is like so:
Maybe try storing it first then accessing it? Then delete them after 1 hour?
$pdf = PDF::setOptions(['isHtml5ParserEnabled' => true, 'isRemoteEnabled' => true])->loadView('charity.gifts.generate_ticket', compact('tickets'));
$pdf->setPaper('a4', 'landscape');
Storage::disk('reports')->put('tickets'. '.pdf', $pdf->output());
$url = Storage::disk('reports')->url('tickets'. '.pdf');
I am using Laravel Log Reader
for viewing log files. It works fine.
But I also have other log files, how can I view them usig this viewer?
This package matching specific file pattern logs/laravel-*.log .So your mentioned log file doesn't match. This package doesn't have configuration to change it at present. But still if you want to view your own log files then you can override method and create your own view file.
I can provide you some basic idea and make sure i haven't written code in super clean.This is to get some idea
Custom class which is extended
<?php
namespace App\Helper;
class LaravelLogReader extends \Haruncpi\LaravelLogReader\LaravelLogReader
{
public function getLogFileDates()
{
$dates = [];
$files = glob(storage_path('logs/*.log'));
$files = array_reverse($files);
foreach ($files as $path) {
$fileName = basename($path);
array_push($dates, $fileName);
}
return $dates;
}
public function get()
{
$availableDates = $this->getLogFileDates();
if (count($availableDates) == 0) {
return response()->json([
'success' => false,
'message' => 'No log available'
]);
}
$configDate = $this->config['date'];
if ($configDate == null) {
$configDate = $availableDates[0];
}
if (!in_array($configDate, $availableDates)) {
return response()->json([
'success' => false,
'message' => 'No log file found with selected date ' . $configDate
]);
}
$pattern = "/^\[(?<date>.*)\]\s(?<env>\w+)\.(?<type>\w+):(?<message>.*)/m";
$fileName = $configDate;
$content = file_get_contents(storage_path('logs/' . $fileName));
preg_match_all($pattern, $content, $matches, PREG_SET_ORDER, 0);
$logs = [];
foreach ($matches as $match) {
$logs[] = [
'timestamp' => $match['date'],
'env' => $match['env'],
'type' => $match['type'],
'message' => trim($match['message'])
];
}
$date = $fileName;
$data = [
'available_log_dates' => $availableDates,
'date' => $date,
'filename' => $fileName,
'logs' => $logs
];
return response()->json(['success' => true, 'data' => $data]);
}
}
and view file which is copied from library view .i have named it as log.blade.php
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Log Reader</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
var angularUrl = '{{asset('laravel-log-reader/angular.min.js')}}';
window.angular || document.write('<script src="' + angularUrl + '">\x3C/script>')
</script>
<style>
body {
margin: 0;
padding: 0;
background: #f4f4f4;
font-family: sans-serif;
}
.btn {
text-decoration: none;
background: antiquewhite;
padding: 5px 12px;
border-radius: 25px;
}
header {
min-height: 30px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
background: #3F51B5;
position: fixed;
left: 0;
right: 0;
top: 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
header .btn_clear_all {
background: #de4f4f;
color: #fff;
}
header .name {
font-size: 25px;
font-weight: 500;
color: white;
}
.content {
margin-top: 65px;
padding: 15px;
background: #fff;
min-height: 100px;
}
.content .date_selector {
min-height: 26px;
min-width: 130px;
border: 1px solid #ddd;
border-radius: 4px;
}
.top_content {
display: flex;
justify-content: space-between;
align-items: center;
}
.top_content .top_content_left {
display: flex;
}
.top_content .top_content_left .log_filter {
display: flex;
align-items: center;
margin-left: 15px;
}
.top_content .top_content_left .log_filter .log_type_item {
margin-right: 4px;
background: #eae9e9;
max-height: 20px;
font-size: 11px;
box-sizing: border-box;
padding: 4px 6px;
cursor: pointer;
}
.top_content .top_content_left .log_filter .log_type_item.active {
background: #2f2e2f;
color: white;
}
.top_content .top_content_left .log_filter .log_type_item.clear {
background: #607D8B;
color: white;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
}
table tr {
border: 1px solid #e8e8e8;
padding: 5px;
}
table tr:hover {
background: #f4f4f4;
}
thead tr td {
background: #717171;
color: #fff;
}
table th,
table td {
padding: 5px;
font-size: 14px;
color: #666;
}
table th {
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase;
}
#media screen and (max-width: 700px) {
.top_content {
flex-direction: column;
}
.top_content .top_content_left {
flex-direction: column;
}
.top_content .log_filter {
flex-wrap: wrap;
}
.top_content .log_filter .log_type_item {
margin-bottom: 3px;
}
}
#media screen and (max-width: 600px) {
header {
flex-direction: column;
}
header .name {
margin-bottom: 20px;
}
.content {
margin-top: 90px;
}
.btn {
font-size: 13px;
}
.dt_box,
.selected_date {
text-align: center;
}
.responsive_table {
max-width: 100%;
overflow-x: auto;
}
table {
border: 0;
}
table thead {
display: none;
}
table tr {
border-bottom: 2px solid #ddd;
display: block;
margin-bottom: 10px;
}
table td {
border-bottom: 1px dotted #ccc;
display: block;
font-size: 15px;
}
table td:last-child {
border-bottom: 0;
}
table td:before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
}
.badge {
padding: 2px 8px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
font-size: 11px;
}
.badge.info {
background: #6bb5b5;
color: #fff;
}
.badge.warning {
background: #f7be57;
}
.badge.critical {
background: #de4f4f;
color: #fff;
}
.badge.emergency {
background: #ff6060;
color: white;
}
.badge.notice {
background: bisque;
}
.badge.debug {
background: #8e8c8c;
color: white;
}
.badge.alert {
background: #4ba4ea;
color: white;
}
.badge.error {
background: #c36a6a;
color: white;
}
</style>
</head>
<body ng-controller="LogCtrl">
<header>
<div class="name">#{{ title }}</div>
<div class="actions">
<a class="btn btn_clear_all" href="#" ng-click="clearAll()">Clear All</a>
<a class="btn" href="{{url(config('laravel-log-reader.admin_panel_path'))}}">Goto Admin Panel</a>
<a class="btn" href="https://laravelarticle.com/laravel-log-reader" title="Laravel Log Reader">Doc</a>
</div>
</header>
<section class="content">
<div class="top_content">
<div class="top_content_left">
<div>
<p class="selected_date" style="font-size: 14px;"><strong>
<span ng-show="response.success">Showing Logs: #{{data.date}}</span>
<span ng-hide="response.success">#{{response.message}}</span>
</strong></p>
</div>
<div class="log_filter">
<div class="log_type_item" ng-class="selectedType==tp?'active':''"
ng-repeat="tp in logTypes track by $index"
ng-click="filterByType(tp)">#{{ tp }}
</div>
<div class="log_type_item clear" ng-show="selectedType" ng-click="selectedType=undefined">CLEAR FILTER
</div>
</div>
</div>
<div class="top_content_right">
<p class="dt_box">Select Date: <select class="date_selector" ng-model="selectedDate"
ng-change="init(selectedDate)">
<option ng-repeat="dt in data.available_log_dates"
value="#{{ dt }}">#{{ dt }}
</option>
</select>
</p>
</div>
</div>
<div>
<div class="responsive_table">
<table>
<thead>
<tr>
<td width="140">Timestamp</td>
<td width="120">Env</td>
<td width="120">Type</td>
<td>Message</td>
</tr>
</thead>
<tr ng-repeat="log in data.logs |filter: selectedType track by $index">
<td>#{{ log.timestamp }}</td>
<td>#{{log.env}}</td>
<td><span class="badge #{{ log.type.toLowerCase() }}">#{{ log.type }}</span></td>
<td>#{{ log.message }}</td>
</tr>
</table>
</div>
</div>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("LogCtrl", function ($scope, $http) {
$scope.title = "Log Reader";
$scope.selectedType = undefined;
$scope.logTypes = ['INFO', 'EMERGENCY', 'CRITICAL', 'ALERT', 'ERROR', 'WARNING', 'NOTICE', 'DEBUG'];
var originalData = null;
$scope.init = function (date) {
var url = '';
if (date !== '' && date !== undefined) {
url = '{{url(config('laravel-log-reader.api_route_path'))}}?date=' + date
} else {
url = '{{url("custom-logger")}}'
}
alert(url);
$http.get(url)
.success(function (data) {
$scope.response = data;
$scope.data = data.data;
originalData = data.data;
})
};
$scope.init();
$scope.filterByType = function (tp) {
$scope.selectedType = tp
};
$scope.clearAll = function () {
if (confirm("Are you sure?")) {
var url = '{{url(config('laravel-log-reader.view_route_path'))}}'
$http.post(url, {'clear': true})
.success(function (data) {
if (data.success) {
alert(data.message);
$scope.init();
}
})
}
}
})
</script>
</section>
</body>
</html>
And add two routes
Route::get('custom-logger', function () {
$laravelLogReader=new \App\Helper\LaravelLogReader();
return $laravelLogReader->get();
});
Route::get('/log-viewer', function () {
return view('log');
});
Note: this not fully optimized code but you can write it in better way.This is only to show you can override the package
Another package you can use
Ref:https://github.com/rap2hpoutre/laravel-log-viewer
This package will read all log files and i have tested it it works fine
Sorry if this question has already been asked, I don't find anything similar.
So I am following a course and I have created the mobile navbar, which works. Then I write the mediaquery for larger screens and the list, instead of being displayed to the right of the navbar, is hidden.
If I inspect the page I can see that the list and the list items are on the right spot, but they are not visible. I have tried with "visibility: visible" but it doesnt' work.
Where is the mistake?
const collapsibles = document.querySelectorAll(".collapsible");
collapsibles.forEach((item) =>
item.addEventListener("click", function () {
this.classList.toggle("collapsible--expanded");
})
);
/* Typography */
html {
font-size: 62.5%;
}
:root {
--color-primary: #2584ff;
--color-secondary: #00d9ff;
--color-accent: #ff3400;
--color-headings: #1b0760;
--color-body: #918ca4;
--color-border: #ccc;
--border-radius: 30px;
--color-body-darker: #5c5577;
}
body {
font-family: Inter, Arial, Helvetica, sans-serif;
font-size: 2.4rem;
line-height: 1.5;
color: var(--color-body);
}
h1,
h2,
h3 {
color: var(--color-headings);
margin-bottom: 1rem;
}
h1 {
font-size: 7rem;
}
h2 {
font-size: 4rem;
}
h3 {
font-size: 3rem;
}
p {
margin-top: 0;
}
#media screen and (min-width: 1024px) {
body {
font-size: 1.8rem;
}
h1 {
font-size: 8rem;
}
h2 {
font-size: 4rem;
}
h3 {
font-size: 2.4rem;
}
}
/* Links */
a {
text-decoration: none;
}
.link-arrow {
color: var(--color-accent);
text-transform: uppercase;
font-size: 2rem;
font-weight: bold;
}
.link-arrow::after {
content: "-->";
margin-left: 5px;
transition: margin 0.15s;
}
.link-arrow:hover::after {
margin-left: 10px;
}
#media screen and (min-width: 1024px) {
.link-arrow {
font-size: 1.5rem;
}
}
/* Badges */
.badge {
border-radius: 20px;
font-size: 2rem;
font-weight: 600;
padding: 0.5rem 2rem;
white-space: nowrap;
}
.badge--primary {
background: var(--color-primary);
color: white;
}
.badge--secondary {
background: var(--color-secondary);
color: white;
}
.badge--small {
font-size: 1.6rem;
padding: 0.5rem 1.5rem;
}
#media screen and (min-width: 1024px) {
.badge {
font-size: 1.5rem;
}
.badge--small {
font-size: 1.2rem;
}
}
/* Lists */
.list {
list-style: none;
padding-left: 0;
color: var(--color-headings);
}
.list--inline .list__item {
display: inline-block;
margin-right: 2rem;
}
.list--tick {
list-style-image: url(/images/tick.svg);
padding-left: 3rem;
}
.list--tick .list__item {
padding-left: 0.5rem;
margin-bottom: 1rem;
}
#media screen and (min-width: 1024px) {
.list--tick .list__item {
padding-left: 0;
}
}
/* Icons */
.icon {
width: 40px;
height: 40px;
}
.icon--small {
width: 30px;
height: 30px;
}
.icon--primary {
fill: var(--color-primary);
}
.icon--white {
fill: white;
}
.icon-container {
background: #f3f9fa;
width: 64px;
height: 64px;
border-radius: 100%;
display: inline-flex;
justify-content: center;
align-items: center;
}
.icon-container--accent {
background: var(--color-accent);
}
/* Buttons */
.btn {
border-radius: 40px;
border: none;
cursor: pointer;
font-size: 1.8rem;
font-weight: 600;
margin-left: 5px;
margin-top: 5px;
padding: 2rem 3rem;
text-transform: uppercase;
white-space: nowrap;
}
.btn--primary {
background-color: var(--color-primary);
color: white;
}
.btn--primary:hover {
background: #8a91f3;
}
.btn--secondary {
background-color: var(--color-secondary);
color: white;
}
.btn--accent {
background-color: var(--color-accent);
color: white;
}
.btn--accent:hover {
background: #e66545;
}
.btn--outline {
background-color: white;
color: black;
border: 2px solid var(--color-headings);
}
.btn--block {
display: inline-block;
width: 100%;
}
.btn--stretched {
padding-left: 6rem;
padding-right: 6rem;
}
/* Input */
.input {
border-radius: 30px;
border: 1px solid #ccc;
color: var(--color-headings);
font-size: 2rem;
outline: 0;
padding: 1.5rem 3.5rem;
}
::placeholder {
color: #cdcbd7;
}
.input-group {
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
display: flex;
}
.input-group .input {
border: 0;
flex-grow: 1;
padding: 1rem 1rem;
}
.input-group .btn {
margin: 4px;
}
#media screen and (min-width: 1024px) {
.input {
font-size: 1.5rem;
}
}
/* Cards */
.card {
border-radius: 7px;
box-shadow: 0 0 20px 10px #f3f3f3;
overflow: hidden;
min-width: 300px;
}
.card__header,
.card__body {
padding: 2rem 3rem;
}
.card--primary .card__header {
background: var(--color-primary);
color: #fff;
}
.card--secondary .card__header {
background: var(--color-secondary);
color: #fff;
}
.card--secondary .badge--secondary {
background: #02cdf1;
}
/* Plans */
.plan__name {
color: #fff;
margin: 0;
font-weight: 500;
font-size: 2.4rem;
}
.plan__price {
font-size: 6rem;
}
.plan__billing-cycle {
font-size: 2.4rem;
font-weight: 300;
opacity: 0.8;
margin-right: 1rem;
}
.plan__description {
font-size: 2rem;
font-weight: 300;
letter-spacing: 1px;
display: block;
}
.plan .list__item {
margin-bottom: 2rem;
}
.plan--popular .card__header {
position: relative;
}
.plan--popular .card__header::before {
content: url(/images/popular.svg);
width: 40px;
display: inline-block;
position: absolute;
top: -6px;
right: 5%;
}
#media screen and (min-width: 1024px) {
.plan__name {
font-size: 1.4rem;
}
.plan__price {
font-size: 5rem;
}
.plan__billing-cycle {
font-size: 1.6rem;
}
.plan__description {
font-size: 1.7rem;
}
}
/* Media */
.media {
display: flex;
max-width: 500px;
}
.media__title {
margin-top: 0;
}
.media__body {
margin: 0 2rem;
}
.media__image {
margin-top: 1rem;
}
/* Quotes */
.quote {
font-size: 3rem;
font-style: italic;
color: var(--color-body-darker);
line-height: 1.3;
}
.quote__text::before {
content: open-quote;
}
.quote__text::after {
content: close-quote;
}
/* footer p {
font-size: 1.6rem;
}
*/
.quote__company {
font-size: 1.6rem;
opacity: 0.4;
color: var(--color-headings);
font-style: normal;
}
/* Grids */
.grid {
display: grid;
}
#media screen and (min-width: 768px) {
.grid--1x2 {
grid-template-columns: 1fr 1fr;
}
}
#media screen and (min-width: 1024px) {
.grid--1x3 {
grid-template-columns: 1fr 1fr 1fr;
}
}
/* testimonials */
.testimonial {
padding: 3rem;
}
.testimonial__image {
position: relative;
}
.testimonial__image > img {
width: 100%;
}
.testimonial__image > .icon-container {
position: absolute;
top: 3rem;
right: -32px;
}
/* Callout */
.callout {
padding: 4rem;
border-radius: 5px;
}
.callout--primary {
background: var(--color-primary);
color: white;
}
.callout__heading {
color: white;
margin-top: 0;
font-size: 3rem;
}
.callout .btn {
justify-self: center;
align-self: center;
}
.callout__content {
text-align: center;
}
#media screen and (min-width: 768px) {
.callout .grid--1x2 {
grid-template-columns: 1fr auto;
}
.callout__content {
text-align: left;
}
.callout .btn {
justify-self: start;
margin: 0 2rem;
}
}
/* COLLAPSIBLES */
.collapsible__header {
display: flex;
justify-content: space-between;
}
.collapsible__heading {
margin-top: 0;
font-size: 3rem;
}
.collapsible__chevron {
transform: rotate(-90deg);
transition: transform 0.3s;
}
.collapsible__content {
max-height: 0;
overflow: hidden;
transition: all 0.3s;
opacity: 0;
}
.collapsible--expanded .collapsible__chevron {
transform: rotate(0);
}
.collapsible--expanded .collapsible__content {
display: block;
max-height: 100vh;
opacity: 1;
}
/* Blocks */
.block {
--padding-vertical: 6rem;
padding: var(--padding-vertical) 2rem;
}
.block__heading {
margin-top: 0;
}
.block--dark {
background: black;
color: #7b858b;
}
.block--dark .block__heading {
color: white;
}
.block--skewed-right {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 80%);
padding-bottom: calc(var(--padding-vertical) + 4rem);
}
.block--skewed-left {
clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
padding-bottom: calc(var(--padding-vertical) + 4rem);
}
.block__header {
text-align: center;
}
/* nav */
.nav {
background: black;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 0 1rem;
align-items: center;
}
.nav__list {
width: 100%;
margin: 0;
}
.nav__item {
padding: 0.5rem 2rem;
border-bottom: 1px solid #222;
}
.nav__item > a {
color: #d2d0db;
transition: color 0.3s;
}
.nav__item > a:hover {
color: #fff;
}
.nav__toggler {
opacity: 0.5;
transition: box-shadow 0.15s;
cursor: pointer;
}
.nav.collapsible--expanded .nav__toggler {
opacity: 1;
box-shadow: 0 0 0 3px #666;
border-radius: 5px;
}
#media screen and (min-width: 768px) {
.nav__toggler {
display: none;
}
.nav__list {
width: auto;
display: flex;
visibility: ;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght#400;600;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="/css/normalize.css" />
<link rel="stylesheet" href="/css/styles.css" />
</head>
<body>
<nav class="nav collapsible">
<img src="/images/logo.svg" alt="" />
<svg class="icon icon--white nav__toggler">
<use xlink:href="images/sprite.svg#menu"></use>
</svg>
<ul class="list nav__list collapsible__content">
<li class="nav__item">Hosting</li>
<li class="nav__item">VPS</li>
<li class="nav__item">Domain</li>
<li class="nav__item">Pricing</li>
</ul>
</nav>
<script src="/js/main.js"></script>
</body>
</html>
Problem was solved by adding max-height: 100%; opacity:1 to the .nav__list rule in CSS.
I am following the BEM practice and want to add specific break points, it appears 2 formats work for me. Does anyone know the advantage of either ?
Here is the first, I embed the media directly into the element (BEM)
.my-component {
&__section-field {
display: flex;
flex-wrap: wrap;
}
&__section-sep {
width: 100%;
#media(min-width: 900px) {
width: 50%;
}
}
}
Here is the second, where I embed the media query outside of the section and redefine the section again.
.my-component {
&__section-field {
display: flex;
flex-wrap: wrap;
}
&__section-sep {
width: 100%;
}
#media(min-width: 900px) {
&__section-sep {
width: 50%;
}
}
}
As you can see the, I am basically changing the width of an item between either 50% or 100% depending if it's mobile only resolution. I am using flexbox with flex-wrap and it wraps depending on there is space left on the line.
They both seem to work the same as far as I can say. Would anyone confirm if there is a difference and which one would be more scalable and maintainable?
Maybe there is something that I haven't thought of, I did think about storing my media queries in a separate file but I was trying to keep everything together and follow the bem methodology.
I prefer the 2nd variant for the following reason: when you have many media queries, indeed, the 1st variant requires less copy/paste.
But though, the code becomes much less readable if you have many elements or modifiers in the block, i.e. selectors. It's common to face a situation when it's needed to change style for several elements/modifiers at exact screen. And when that case appears - as for me - it's easier to navigate between media queries, find the needed media and change code there - so you work at one place in the file, whereas in the 1st variant you would need to jump between selectors. In my opinion when it comes to work with media queries - it's faster to navigate between them, then to navigate between selectors.
imagine the following code with media query inside every selector :
.section_name_educational {
display: flex;
flex-direction: row;
padding: 0px;
.fp-tableCell {
display: flex;
flex-direction: row;
}
.section {
&__inner {
display: flex;
flex-direction: row-reverse;
height: 100vh;
height: calc(100vh - 80px);
box-sizing: border-box;
width: 50%;
padding-left: 40px;
margin-top: auto;
padding-bottom: 40px;
}
&__header {
position: relative;
width: 100%;
top: 62px;
left: 40px;
}
&__text-holder {
width: 100%;
}
&__title {
font-size: 48px;
}
&__subtitle {
width: 150%;
margin: 20px 0px;
}
&__description {
color: #669900;
font-size: 18px;
}
&__primary {
height: 100%;
display: flex;
box-sizing: border-box;
flex-direction: column;
justify-content: space-between;
width: 100%;
}
&__additional {
display: none;
}
&__kettles {
display: flex;
}
&__kettle {
height: auto;
margin-right: 20px;
&_order {
&_1 {
width: 183px;
min-width: 183px;
max-width: 183px;
}
&_2 {
width: 108px;
min-width: 108px;
max-width: 108px;
}
&_3 {
width: 127px;
min-width: 127px;
max-width: 127px;
}
}
}
&__background-holder {
overflow: hidden;
max-height: 100vh;
}
&__background {
position: relative;
width: auto;
height: 100vh;
}
}
}
#media all and (max-height: 600px) {
.section_name_educational {
.section {
&__kettle {
&_order {
&_2 {
width: 68px;
max-width: 68px;
min-width: 68px;
height: 120px;
margin-left: 30px;
}
&_3 {
width: 78px;
max-width: 78px;
min-width: 78px;
height: 120px;
}
}
}
}
}
}
#media all and (max-height: 760px) {
.section_name_educational {
.section {
&__header {
top: 40px;
}
&__subtitle {
width: 100% !important;
}
&__additional {
display: none !important;
}
}
}
}
#media (--large) {
.section_name_educational {
.section {
&__subtitle {
width: 120%;
}
}
}
}
#media (--xlarge) {
.section_name_educational {
padding-top: 120px;
.section {
&__inner {
height: calc(100vh - 60px);
margin-top: 0;
}
&__header {
transition-delay: 1s;
opacity: 0;
right: -100px;
bottom: -40px;
transform: translateY(20px);
}
&__subtitle {
width: 120%;
}
&__primary {
width: calc(100% - 160px);
}
&__additional {
display: flex;
flex-direction: column;
justify-content: space-between;
}
&__bubbles {
display: block;
position: relative;
top: 40px;
width: 160px;
min-width: 160px;
max-width: 160px;
height: auto;
transform: translateY(20px);
opacity: 0;
transition-delay: 1s;
}
&__kettle {
opacity: 0;
transform: translateY(20px);
transition-delay: 1s;
}
}
&.active {
.section {
&__header {
transition: opacity 1s ease-out 0.8s,
transform 0.8s ease-out 0.8s;
opacity: 1;
transform: translateY(0px);
}
&__kettle {
opacity: 1;
transform: translateY(0px);
transition: opacity 0.6s ease-out,
transform 0.6s ease-out;
&_order {
&_1 {
transition-delay: 1.6s;
display: block;
}
&_2 {
transition-delay: 1.9s;
}
&_3 {
transition-delay: 2.1s;
}
}
}
&__bubbles {
transition: opacity 0.8s ease-out 2.5s,
transform 0.8s ease-out 2.3s;
transform: translateY(0px);
opacity: 1;
}
}
}
}
}
#media all and (min-width: 1400px) {
.section_name_educational {
.section {
&__header {
left: 60px;
}
&__subtitle {
width: 110%;
}
}
}
}
#media (--xxlarge) {
.section_name_educational {
.section {
&__primary {
width: calc(100% - 148px);
}
&__subtitle {
width: 80%;
margin: 40px 0px;
}
&__description-inner {
width: 60%;
}
&__bubbles {
width: 148px;
min-width: 148px;
max-width: 148px;
top: 40px;
}
}
}
}
#media (--monster) {
.section_name_educational {
.section {
&__primary {
width: calc(100% - 227px);
}
&__header {
left: 200px;
top: 150px;
}
&__title {
font-size: 58px;
}
&__subtitle {
font-size: 24px;
width: 80%;
}
&__description {
font-size: 24px;
}
&__bubbles {
width: 227px;
min-width: 227px;
max-width: 227px;
left: 0px;
}
}
}
}
As for me - it would be difficult to read it if I had done it with the 1st variant.
Inspired by native Android zoomOut for form transitions and iOS app launching zoom effect, which are both really cool...
How do I go about implementing zoom In or Out transition for Forms, Dialogs and Containers in Codenameone?
I want the transition to have zooming animation like below:
#charset "UTF-8";
*,
:before,
:after {
margin: 0;
padding: 0;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input,
select,
button,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font: inherit;
color: inherit;
}
.butt,
.input {
padding: .75rem;
margin: .375rem;
background-color: transparent;
border-radius: 4px;
}
.butt:focus,
.input:focus {
outline: none;
}
.butt {
border: 2px solid #f35626;
line-height: 1.375;
padding-left: 1.5rem;
padding-right: 1.5rem;
font-weight: 700;
color: #f35626;
cursor: pointer;
-webkit-animation: hue 60s infinite linear;
}
.butt--primary {
background-color: #f35626;
color: #fff;
}
.input {
border: 1px solid #c0c8c9;
border-radius: 4px;
}
.input--dropdown {
background-image: url("images/ddown.png");
background-image: url("images/ddown.svg?3"), none;
background-repeat: no-repeat;
background-size: 1.5rem 1rem;
background-position: right center;
}
h1,
.alpha {
margin-bottom: 1.5rem;
font-size: 3rem;
font-weight: 100;
line-height: 1;
letter-spacing: -.05em;
}
h2,
.beta {
margin-bottom: .75rem;
font-weight: 400;
font-size: 1.5rem;
line-height: 1;
}
#media (min-width: 650px) {
.mega {
font-size: 6rem;
line-height: 1;
}
}
.subhead,
.meta {
color: #7b8993;
}
.promo {
text-align: center;
}
p,
hr,
form {
margin-bottom: 1.5rem;
}
hr {
border: none;
margin-top: -1px;
height: 1px;
background-color: #c0c8c9;
background-image: -webkit-linear-gradient(0deg, #fff, #c0c8c9, #fff);
}
a {
color: inherit;
text-decoration: underline;
-webkit-animation: hue 60s infinite linear;
}
a:hover {
color: #f35626;
}
.wrap {
max-width: 38rem;
margin: 0 auto;
}
.island {
padding: 1.5rem;
}
.isle {
padding: .75rem;
}
.spit {
padding: .375rem;
}
html {
font: 100%/1.5"Roboto", Verdana, sans-serif;
color: #3d464d;
background-color: #fff;
-webkit-font-smoothing: antialiased;
width: 100%;
overflow: hidden-x;
text-align: center;
}
#media (min-width: 650px) {
html {
height: 100%;
}
html:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
body {
display: inline-block;
vertical-align: middle;
max-width: 38rem;
}
}
.site__header {
-webkit-animation: bounceInUp 1s;
}
.site__title {
color: #f35626;
background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 60s infinite linear;
}
.site__content {
-webkit-animation: bounceInUp 1s;
-webkit-animation-delay: .1s;
}
.site__content form {
-webkit-animation: bounceInUp 1s;
-webkit-animation-delay: .1s;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animated.bounceIn,
.animated.bounceOut {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
.animated.flipOutX,
.animated.flipOutY {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
#-webkit-keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
#keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}
#-webkit-keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
to {
opacity: 0;
}
}
#keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
to {
opacity: 0;
}
}
.zoomOut {
-webkit-animation-name: zoomOut;
animation-name: zoomOut;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, minimal-ui" />
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
<link rel="dns-prefetch" href="//code.jquery.com" />
<link href='//fonts.googleapis.com/css?family=Roboto:400,100,400italic,700italic,700' rel='stylesheet' type='text/css'>
</head>
<body>
<header class="site__header island">
<div class="wrap">
<span id="animationSandbox" style="display: block;"><h1 class="site__title mega">Zoom me in and out</h1></span>
</div>
</header>
<!-- /.site__header -->
<main class="site__content island" role="content">
<div class="wrap">
<form>
<select class="input input--dropdown js--animations">
<optgroup label="Zoom Entrances">
<option value="zoomIn">zoomIn</option>
</optgroup>
<optgroup label="Zoom Exits">
<option value="zoomOut">zoomOut</option>
</optgroup>
</select>
<button class="butt js--triggerAnimation">Animate it</button>
</form>
<hr />
</div>
</main>
<!-- /.site__content -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
function testAnim(x) {
$('#animationSandbox').removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
$(this).removeClass();
});
};
$(document).ready(function() {
$('.js--triggerAnimation').click(function(e) {
e.preventDefault();
var anim = $('.js--animations').val();
testAnim(anim);
});
$('.js--animations').change(function() {
var anim = $(this).val();
testAnim(anim);
});
});
</script>
</body>
</html>
Probably the closest thing to some of the Android effects is the Morph transition between forms that allows a component to grow into the next form http://www.codenameone.com/blog/mighty-morphing-components.html
If you want something closer to the above code you can just position the component in the right location and make it smaller then use animateLayout() to make it grow into place.
In the old days we had a FlyIn transition which mapped to this exactly but it used old 3D code. I think it should be trivial to implement though with the affine transform and scale similarly to the FlipTransition.