I''ve written an app in lua using the Corona SDK, I'm trying to download some images from a google drive folder.
I've used the OAth playground to authroize the scopes I need and I've obtained a refresh token and have a method to obtain a new access token when necessary. This is how I download the images:
network.download(
"https://drive.google.com/uc?export=download&id="..decodedResponse.files[index].id,
"GET",
networkListener,
params,
decodedResponse.files[index].name,
system.DocumentsDirectory
)
where decodedResponse refers to the json obtained that lists all the files in the specified folder. This was working fine a few days ago but now whenever I try it, the image downloaded is invalid and corrupt. I even tried using a new folder in the drive.
I've tried other links such like
https://www.googleapis.com/drive/v3/files/FILE_ID_HERE?alt=media
and some others I've seen online but these give me a
code 403
"Daily Limit for Unauthenticated Use Exceeded. Continued use requires signup."
error. I read somewhere that specifying scope could fix the code 403 error but I'm not sure where exactly to specify this.
I'd appreciate the help, thanks!
Edit: I took a look at one of the images with a text editor, the result was some html that look to be code for a google auth page, some of it is below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=300, initial-scale=1" name="viewport">
<meta name="description" content="Google Drive is a free way to keep your files backed up and easy to reach from any phone, tablet, or computer. Start with 15GB of Google storage – free.">
<meta name="google-site-verification" content="LrdTUW9psUAMbh4Ia074-BPEVmcpBxF6Gwf0MSgQXZs">
<title>Meet Google Drive – One place for all your files</title>
<style>
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url(//fonts.gstatic.com/s/opensans/v15/DXI1ORHCpsQm3Vp6mXoaTYnF5uFdDttMLvmWuJdhhgs.ttf) format('truetype');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(//fonts.gstatic.com/s/opensans/v15/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
</style>
<style>
h1, h2 {
-webkit-animation-duration: 0.1s;
-webkit-animation-name: fontfix;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0;
}
#-webkit-keyframes fontfix {
from {
opacity: 1;
}
to {
opacity: 1;
}
}
</style>
<style>
html, body {
font-family: Arial, sans-serif;
background: #fff;
margin: 0;
padding: 0;
border: 0;
position: absolute;
height: 100%;
min-width: 100%;
font-size: 13px;
color: #404040;
direction: ltr;
-webkit-text-size-adjust: none;
}
button,
input[type=button],
input[type=submit] {
font-family: Arial, sans-serif;
font-size: 13px;
}
a,
a:hover,
a:visited {
color: #427fed;
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 {
font-size: 20px;
color: #262626;
margin: 0 0 15px;
font-weight: normal;
}
h2 {
font-size: 14px;
color: #262626;
margin: 0 0 15px;
font-weight: bold;
}
input[type=email],
input[type=number],
input[type=password],
input[type=tel],
input[type=text],
input[type=url] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
display: inline-block;
height: 36px;
padding: 0 8px;
margin: 0;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
font-size: 15px;
color: #404040;
}
input[type=email]:hover,
input[type=number]:hover,
input[type=password]:hover,
input[type=tel]:hover,
input[type=text]:hover,
input[type=url]:hover {
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
input[type=email]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=url]:focus {
outline: none;
border: 1px solid #4d90fe;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
input[type=checkbox],
input[type=radio] {
-webkit-appearance: none;
display: inline-block;
width: 13px;
height: 13px;
margin: 0;
cursor: pointer;
vertical-align: bottom;
background: #fff;
border: 1px solid #c6c6c6;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
input[type=checkbox]:active,
input[type=radio]:active {
background: #ebebeb;
}
input[type=checkbox]:hover {
border-color: #c6c6c6;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
input[type=radio] {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
width: 15px;
height: 15px;
}
input[type=checkbox]:checked,
input[type=radio]:checked {
background: #fff;
}
input[type=radio]:checked::after {
content: '';
display: block;
position: relative;
top: 3px;
left: 3px;
width: 7px;
height: 7px;
background: #666;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}
input[type=checkbox]:checked::after {
content: url(https://ssl.gstatic.com/ui/v1/menu/checkmark.png);
display: block;
position: absolute;
top: -6px;
left: -5px;
}
input[type=checkbox]:focus {
outline: none;
border-color: #4d90fe;
}
.stacked-label {
display: block;
font-weight: bold;
margin: .5em 0;
}
.hidden-label {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
height: 0px;
width: 0px;
overflow: hidden;
visibility: hidden;
}
input[type=checkbox].form-error,
input[type=email].form-error,
input[type=number].form-error,
input[type=password].form-error,
input[type=text].form-error,
input[type=tel].form-error,
input[type=url].form-error {
border: 1px solid #dd4b39;
}
.error-msg {
margin: .5em 0;
display: block;
color: #dd4b39;
line-height: 17px;
}
.help-link {
background: #dd4b39;
padding: 0 5px;
color: #fff;
font-weight: bold;
display: inline-block;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
text-decoration: none;
position: relative;
top: 0px;
}
.help-link:visited {
color: #fff;
}
.help-link:hover {
color: #fff;
background: #c03523;
text-decoration: none;
}
.help-link:active {
opacity: 1;
background: #ae2817;
}
.wrapper {
position: relative;
min-height: 100%;
}
.content {
padding: 0 44px;
}
.main {
padding-bottom: 100px;
}
/* For modern browsers */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
zoom:1;
}
.google-header-bar {
height: 71px;
border-bottom: 1px solid #e5e5e5;
overflow: hidden;
}
.header .logo {
background-image: url(https://ssl.gstatic.com/accounts/ui/logo_1x.png);
background-size: 116px 38px;
background-repeat: no-repeat;
margin: 17px 0 0;
float: left;
height: 38px;
width: 116px;
}
I can't post the entire thing cause it exceeds the body character limit
I was able to get it to work by using a different url and adding this:
local params = {}
params.progress = true
params.headers = headers
This was the URL I used:
https://www.googleapis.com/drive/v3/files/FILE_ID_HERE?alt=media
Related
In my Laravel 7.6 / blade / bootstrap 4 / flex app I have resources/sass/frontend.scss file more 1000 rows
Also I use resources/sass/_variables.scss with about 40 lines
I run command
npm run watch-poll
and it takes rather wrong time to compile my 2 scss files.
I want to split frontend.scss into several small scss files and wonder how better to make it for
better performance?
In my resources/views/layouts/frontend.blade.php I have
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css">
<link rel="icon" type="image/png" href="/favicon.ico"/>
<link rel="alternate" type="application/atom+xml" title="News" href="/feed">
<link href="{{ asset('css/frontend.css') }}{{ "?dt=".time() }}" rel="stylesheet" type="text/css">
Having several small scss files is it better to include them in at top
of frontend.scss, like I do with _variables.scss?
If the order of these files have meaning?
Or maybe beetr to include generated .css file in frontend.blade.php ?
Or some other way ?
UPDATED # 1:
I have resources/sass/_variables.scss :
// Body
// Typography
$font-family-sans-serif: "Roboto", sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;
$text-color: #636b6f;
$font_size: 18px;
//$font_size: 24px;
$background_color: #f5f8fa;
$border_color: #999;
$border-separator-color: 0.05rem solid #b3b3b3;
$item-border: 1px solid #92baa7;
$button_color: #FFFFFF; /* color of button */
$cancel_background_color: #949494; /* background color of cancel button */
$prev_background_color: #45A6F9; /* background color of previos button */
$text_error_color: red;
$link_color: #475fe8;//maroon;
$toggle_color: olive;
$indent_xs_1: 0.1em;
$indent_xs_2: 0.2em;
$indent_xs: 0.3em;
$indent_sm: 0.5em;
$indent_md: 1em;
$indent_lg: 2em;
$text_color : #00001D;
$indent_img : 0.7em; /* $indent for image : margin, padding */
$current_admin_template: 'defaultBS41Backend';
$debug_mode : false;
and full content resources/sass/FlexyFrontend/frontend.scss :
#import "node_modules/font-awesome/scss/font-awesome";
#font-face {
font-family:'Simple line icons';
src:url('/fonts/simple-line-icons/Simple-Line-Icons.ttf');
font-style:normal;
}
#font-face {
font-family:'Themify';
src:url('/fonts/themify/themify.ttf');
font-style:normal;
}
#font-face {
font-family:'Source sans pro';
src:url('/fonts/source-sans/sourcesanspro-regular-webfont.ttf');
font-style:normal
}
#font-face {
font-family:'Open sans' ;
src:url('/fonts/opensans/opensans.ttf');
font-style:normal;
}
#font-face {
font-family:'DejaVu Sans';
src:url('/fonts/DejaVuSans/DejaVuSans-Bold.ttf');
font-style:normal;
}
// Variables
#import "../variables";
// Bootstrap
#import '~bootstrap/scss/bootstrap';
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: $background_color;
//color: #cccccc;
//font-size: 14px;
/* Helvetica/Arial-based sans serif stack */
font-family: 'Roboto', 'Open Sans';
font-size: $font_size;
}
.wrapper_area {
height: 100%;
display: flex;
flex-direction: column;
}
.header_area, .footer_area {
background: silver;
}
.content_area {
flex: 1;
overflow: auto;
background: pink;
}
/// COMMON ELEMENTS BLOCK START
.bordered_item {
border: 1px ridge grey !important;
//border: 2px solid yellow;
}
.bordered_block {
border: $border-separator-color;
font-size: $font_size;
color: $text-color;
padding: 0 0.4em 0.4em 0.4em;
margin: 0 0 1.5em 0;
-webkit-box-shadow: 5px 5px 5px 5px #000;
box-shadow: 2px 2px 2px 2px #d7d7d7;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-border-radius: 8px;
}
.hidden_info {
color:$background_color;
//display: none;
//color:$text-color;
background-color:$background_color;
}
/// COMMON ELEMENTS BLOCK END
.page_content_container {
#if ($debug_mode) {
border: 3px dotted yellow;
}
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
justify-self: flex-start;
justify-items: flex-start;
}
.raised_page_content_container {
flex: 1 1 200px;
padding: 20px;
margin: auto;
margin-top: 15%;
overflow-y: auto;
}
.page_content_header {
#if ($debug_mode) {
border: 0.2rem dotted green;
}
padding: 0px;
margin: 0;
}
.page_content {
flex: 1 1;
#if ($debug_mode) {
border: 3px dotted red !important;
}
justify-self: flex-start;
justify-items: flex-start;
align-self: flex-start;
align-items: flex-start;
padding: 0;
margin: 0;
width: 100% !important;
height: 100% !important;
.bordered_block{}
}
.page_content_footer {
flex: 1;
#if ($debug_mode) {
border: 2px dotted olive;
}
padding: 0px;
margin: 0;
}
.content_container {
width: 100%;
padding: 4px;
}
.card, .card-body, .card-text, .card-title, .card-footer {
background-color: $background_color !important;
//background-color: green !important;
font-family: 'Roboto', 'Open Sans' !important;
text-decoration: none !important;
border: none;
border-radius: 0;
}
section {
float: left;
width: 100%;
background: $background_color; /* fallback for old browsers */
padding: 30px 0;
}
//h1{float:left; width:100%; color:#232323; margin-bottom:30px; font-size: 14px;}
//h1 span{font-family: Roboto, serif; display:block; font-size:45px; text-transform:none; margin-bottom:20px; margin-top:30px; font-weight:700}
//h1 a{color:#131313; font-weight:bold;}
.banner_image {
border-radius: 20%;
border-style: outset;
border-corner-shape: bevel;
-webkit-border-radius: 20%;
-moz-border-radius: 20%;
-webkit-box-shadow: #000 0 2px 10px;
-moz-box-shadow: #000 0 2px 10px;
padding: 8px;
box-shadow: 0px 0px 20px #b4b4b4;
border-top:none;
border-left:none;
border-right:solid 2px #dddddd;
border-bottom:solid 2px #dddddd;
}
.found_text {
background-color: #faff98;
}
.badge {
display: inline-block;
min-width: 10px;
padding: 4px 8px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: #777;
border-radius: 10px;
}
.img-preview-wrapper {
text-align: center !important;
border: none;
}
.news-preview-wrapper {
text-align: center !important;
border: none;
}
/// COMMON FLEX ELEMENTS BLOCK START
.block_splitting_left_23 {
display: flex;
justify-self: flex-start;
flex: 2 1 0;
font-weight: normal;
#if ($debug_mode) {
border: 6px dotted green;
}
}
.block_splitting_right_13 {
display: flex;
justify-self: flex-start;
flex: 1 1 0 ;
font-weight: normal;
color: #403941;
width: 100% !important;
#if ($debug_mode) {
border: 5px dotted red;
}
}
.block_splitting_left_half {
display: flex;
justify-self: flex-start;
flex: 1;
font-weight: normal;
#if ($debug_mode) {
border: 6px dotted yellow;
}
}
.block_splitting_right_half {
display: flex;
justify-self: flex-end;
flex: 1 ;
font-weight: normal;
color: #403941;
#if ($debug_mode) {
border: 5px dotted maroon;
}
}
.key_values_rows_label_half {
display: flex;
justify-self: flex-start;
flex: 1;
font-weight: normal;
#if ($debug_mode) {
border: 2px dotted green;
}
flex-wrap: nowrap;
white-space: nowrap;
}
.key_values_rows_value_half {
justify-self: flex-end;
flex: 1;
font-weight: normal;
color: #403941;
#if ($debug_mode) {
border: 2px dotted red;
}
}
.key_values_rows_label_13 {
display: flex;
justify-self: flex-start;
flex: 1 1 30px;
font-weight: normal;
#if ($debug_mode) {
border: 2px dotted green;
}
width: auto;
margin: 0;
padding: 0;
flex-wrap: nowrap;
white-space: nowrap;
}
.key_values_rows_value_13 {
justify-self: flex-end;
flex: 3 1;
font-weight: normal;
color: #403941;
margin: 0;
padding: 0;
#if ($debug_mode) {
border: 2px dotted red;
}
}
.space_between_wraping_cell {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.column_content_left_aligned {
#if ($debug_mode) {
border: 2px dotted blue;
}
display: flex;
flex: 1;
flex-direction: column;
justify-items: flex-start;
align-items: flex-start;
width: 100% !important;
}
.column_content_centered {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
}
.row_content {
display: flex;
flex-direction: row;
justify-content: flex-start;
//align-items: center;
//border: 2px dotted green;
}
.column_content {
display: flex;
flex: 1;
flex-direction: column;
justify-content: flex-start;
}
.row_content_centered {
display: flex !important;
flex-direction: row !important;
justify-content: space-around !important;
align-items: center;
#if ($debug_mode) {
border: 3px dotted red !important;
}
}
.row_content_right_aligned {
display: flex !important;
flex-direction: row !important;
justify-content: flex-end !important;
align-items: center;
border: 0px dotted green !important;
}
.key_values_rows {
display: flex;
flex-direction: row;
padding: 4px;
}
.key_values_rows_value {
justify-self: flex-end;
font-weight: normal;
color: #403941;
}
.key_values_rows_label {
display: flex;
justify-self: flex-start;
flex: 4;
font-weight: normal;
}
.bottom_split_border {
border-bottom: $border-separator-color !important;
}
.top_split_border {
border-top: $border-separator-color !important;
}
/// COMMON FLEX ELEMENTS BLOCK END
// DIFFERENT DEVICES BLOCK START
/* Big Media */
.block_2columns_md {
display: flex;
flex-direction: row;
padding: 0;
margin: 0;
#if ($debug_mode) {
border: 4px ridge blue !important;
}
width: 100%;
}
.block_2columns_sm {
display: flex;
flex-direction: row;
justify-content: space-around;
padding: 4px;
#if ($debug_mode) {
border: 3px solid red;
}
width: 100%;
}
img.lazy {
border: 4px dotted red !important;
background-color: yellow !important;
}
.lazy_image {
border: 4px dotted red !important;
background-color: yellow !important;
}
.vote_item {
#extend .bordered_item;
}
.single_vote_image_left_aligned {
//border: 1px dotted gray;
border: 2px dotted red;
padding: 2px;
margin: 5px;
height: auto;
}
.image_in_3_columns_list {
border: 1px dotted gray;
//border: 2px dotted green;
padding: 2px;
margin: 2px;
max-width: 280px;
height: auto;
}
.vote_item_selection_image {
border: 1px dotted gray;
padding: 2px;
margin: 5px;
}
/* Large ≥992px ipad pro */
#media only screen and (min-width: 1280px) { /* Extra large ≥ 1200px */
.single_vote_image_left_aligned {
max-width: 340px;
}
.image_in_3_columns_list {
max-width: 280px;
}
.img_full_width_wrapper {
max-width: 1080px;
height: auto;
padding: 4px;
margin: 0;
}
.category_image {
max-width: 1030px;
height: auto;
padding: 1px;
border: $border-separator-color;
}
.flexbox-parent {
padding-left: 280px !important;
padding-right: 280px !important;
}
.test-device {
background: url(/images/test-device/exlg.png) center center no-repeat;
border: 1px dotted #2D27B6;
margin: 1px;
min-width: 48px;
height: 32px;
}
.banner_image {
border-radius: 20%;
border-style: outset;
border-corner-shape: bevel;
max-width: 340px;
height: auto;
}
.vote_item_selection_image {
max-width: 380px;
height: auto;
}
} // #media only screen and (min-width: 1280px) { /* Extra large ≥ 1200px */
#media only screen and (min-width: 992px) and (max-width: 1280px) { /*lg*/
.single_vote_image_left_aligned {
max-width: 300px;
}
.image_in_3_columns_list {
max-width: 220px;
}
.img_full_width_wrapper {
max-width: 820px;
height: auto;
padding: 4px;
margin: 0;
}
.category_image {
max-width: 680px;
height: auto;
padding: 1px;
border: $border-separator-color;
}
.flexbox-parent {
padding-left: 120px !important;
padding-right: 120px !important;
}
.test-device {
background: url(/images/test-device/lg.png) center center no-repeat;
border: 1px dotted #2D27B6;
margin: 1px;
min-width: 32px;
height: 32px;
}
.banner_image {
border-radius: 20%;
border-style: outset;
border-corner-shape: bevel;
max-width: 300px;
height: auto;
}
.vote_item_selection_image {
max-width: 300px;
height: auto;
}
} // #media only screen and (min-width: 992px) and (max-width: 1280px) { /*lg*/
/* md : Medium ≥768px ipad or ipad mini */
#media only screen and (min-width: 768px) and (max-width: 991px) { /* Ipad Pro md */
.single_vote_image_left_aligned {
max-width: 200px;
}
.image_in_3_columns_list {
max-width: 200px;
}
.img_full_width_wrapper {
max-width: 600px;
height: auto;
padding: 4px;
margin: 0;
}
.category_image {
max-width: 580px;
height: auto;
padding: 1px;
border: $border-separator-color;
}
.v--modal {
top: 25px !important;
left: 25px !important;
width: 720px !important;
height: 960px !important;
}
.flexbox-parent {
padding-left: 50px !important;
padding-right: 50px !important;
}
.page_content_container {
padding: 12px;
}
.test-device {
background: url(/images/test-device/md.png) center center no-repeat;
border: 1px dotted #2D27B6;
margin: 1px;
min-width: 32px;
height: 32px;
}
.banner_image {
border-radius: 20%;
border-style: outset;
border-corner-shape: bevel;
max-width: 200px;
height: auto;
}
.vote_item_selection_image {
max-width: 180px;
height: auto;
}
} // #media only screen and (min-width: 768px) and (max-width: 991px) { /* md - Ipad Pro */
/* sm : Small ≥ 576px Nexus7 */
#media only screen and (min-width: 576px) and (max-width: 767px) { /* sm : Nexus 7 */
.single_vote_image_left_aligned {
max-width: 240px;
}
.image_in_3_columns_list {
max-width: 220px;
}
.img_full_width_wrapper {
max-width: 500px;
height: auto;
padding: 4px;
margin: 0;
}
.category_image {
max-width: 500px;
height: auto;
padding: 1px;
border: $border-separator-color;
}
.v--modal {
top: 20px !important;
left: 20px !important;
width: 560px !important;
height: 920px !important;
}
.flexbox-parent {
padding-left: 10px !important;
padding-right: 10px !important;
}
.page_content_container {
padding: 8px;
}
.block_2columns_md { /* sm */
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
#if ($debug_mode) {
border: 3px solid greenyellow;
}
width: 100%;
}
.test-device { /* xs600.png */
background: url(/images/test-device/sm.png) center center no-repeat;
border: 1px dotted #2D27B6;
margin: 1px;
min-width: 64px;
height: 32px;
}
.banner_image {
border-radius: 20%;
border-style: outset;
border-corner-shape: bevel;
max-width: 480px;
height: auto;
}
.vote_item_selection_image {
max-width: 400px;
height: auto;
}
} //#media only screen and (min-width: 576px) and (max-width: 767px) { /* sm : Nexus 7 */
/* xs : Extra small < 576px iphon5/SE */
#media only screen and (max-width: 575px) { /* iphon5/SE */
.single_vote_image_left_aligned {
max-width: 120px;
}
.image_in_3_columns_list {
max-width: 240px;
}
.task_image {
max-width: 100px;
height: auto;
padding: 1px;
border: $border-separator-color;
}
.category_image {
max-width: 280px;
height: auto;
padding: 1px;
border: $border-separator-color;
}
.img_full_width_wrapper {
max-width: 260px;
height: auto;
padding: 4px;
margin: 0;
}
.v--modal {
top: 10px !important;
left: 10px !important;
width: 300px !important;
height: 540px !important;
}
.flexbox-parent {
padding-left: 2px !important;
padding-right: 2px !important;
}
.page_content_container {
padding: 2px;
margin: auto;
}
.block_2columns_md { /* xs - iphon5/SE */
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
#if ($debug_mode) {
border: 2px solid blue;
}
width: 100%;
}
.test-device {
background: url(/images/test-device/xs.png) center center no-repeat;
border: 1px dotted #2D27B6;
margin: 1px;
min-width: 64px;
height: 32px;
}
.banner_image {
border-radius: 20%;
border-style: outset;
border-corner-shape: bevel;
max-width: 250px;
height: auto;
}
.vote_item_selection_image {
max-width: 200px;
height: auto;
}
} //#media only screen and (max-width: 575px) { /* xs - iphon5/SE */
// DIFFERENT DEVICES BLOCK END
/// FLEX BUTTONS BLOCK START
.content_with_right_button {
display: flex;
flex-direction: row;
}
.content_with_right_button_left_content {
display: flex;
flex: 1 1;
#if ($debug_mode) {
border: 2px dotted green;
}
}
.content_with_right_button_right_button {
display: flex;
flex: 0 0 30px;
#if ($debug_mode) {
border: 2px dotted red;
}
align-items: center;
justify-content: center;
}
/// FLEX BUTTONS BLOCK END
/// FLEX BADGE BLOCK START
.badge_item_row {
flex: 1 0 2rem;
//background-color: lightpink;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
padding: 0;
margin: 0;
}
.badge_item_row_cell {
flex-wrap: wrap;
flex: 1 0;
align-content: center;
justify-content: space-around;
padding: 0;
#if ($debug_mode) {
border: 2px dotted red !important;
}
}
/// FLEX BADGE BLOCK START
/* FOOTER BLOCK START */
.context-dark, .bg-gray-dark, .bg-primary {
color: rgba(255, 255, 255, 0.8);
}
.footer-classic a, .footer-classic a:focus, .footer-classic a:active {
color: #0b0b0b;
}
.nav-list li {
padding-top: 5px;
padding-bottom: 5px;
}
.nav-list li a:hover:before {
margin-left: 0;
opacity: 1;
visibility: visible;
}
ul, ol {
list-style: none;
padding: 0;
margin: 0;
}
.menu-item {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding: 5px 0 5px 0 !important;
margin: 0 !important;
color: white;
background-color: #2D3246 !important;
}
footer {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
.menu-items-container {
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 0 !important;
margin: 0 !important;
background-color: #2D3246 !important;
}
.nav-list li a:before {
content: "\f14f";
font: 400 21px/1 "Material Design Icons";
//color: #4d6de6;
display: inline-block;
vertical-align: baseline;
margin-left: -28px;
margin-right: 7px;
opacity: 0;
visibility: hidden;
transition: .22s ease;
}
.app_title_icon_selected_dashboard {
color: transparent;
background-color: white;
margin-right: 5px;
}
.app_title_icon_warning {
color: red;
background-color: yellow ;
margin-right: 5px;
}
.app_title_icon {
color: $text-color;
background-color: transparent;
margin-right: 5px;
}
/* FOOTER BLOCK END */
/* breadcrumb BLOCK START */
.breadcrumb {
margin: 0px;
padding: 0px;
//border: 0px dotted green;
}
.breadcrumb-item {
//background-color: darkgrey;
}
.breadcrumb-item.active {
}
/* breadcrumb BLOCK END */
/* COMPONENTS BLOCK START */
.taggable-votes-block {
width: 100% !important;
padding: 12px !important;
margin: 0 !important;
flex: 1 !important;
flex-direction: column !important;
align-items: flex-start !important;
#extend .bordered_block
}
.active-vote-categories-block {
width: 100% !important;
padding: 12px !important;
margin: 0 !important;
flex: 1 !important;
flex-direction: column !important;
align-items: flex-start !important;
#extend .bordered_block
}
.most-rating-quiz-quality-block {
width: 100% !important;
padding: 12px !important;
margin: 0 !important;
#extend .bordered_block
//border: 2px dotted blue !important;
}
.active-banners-block {
width: 100% !important;
padding: 12px !important;
margin: 0 !important;
#extend .bordered_block
//border: 2px dotted blue !important;
}
.block-selection {
//z-index: 1;
border: 4px ridge #fffffe;
padding: 0;
margin: 0;
//background-color: yellow;
}
/* COMPONENTS BLOCK END */
Any ideas how to optimize it ?
Thanks!
You could try with this solution to keep tidy your sass code and
almost parallel to the structure of your blades .
sass/
|
|– general/
|– |- parts/
| |– _reset.scss // Reset Style
| |– _typography.scss // Import fonts and define property
| |– _variables.scss // Define scss variables
| |
| |- _general.scss // Import all the general parts
|
|– layout/
| |- parts/
| |– _navigations.scss // Navigation
| |– _header.scss // Header
| |– _footer.scss // Footer
| |– _sidebar.scss // Sidebar
| |
| |– _layouts.scss // Import all the layout parts
|
|– fontend/
| |- page/
| |– parts/ // Page sections
| |– _page.scss // Import all the page sections
| |
| |– _frontend.scss // Import _page.scss
|
|– admin/
| |- page/
| |– parts/ // Page sections
| |– _page.scss // Import all the page sections
| |
| |– _admin.scss // Import _page.scss
|
|
`– main.scss // Import _general.scss,_layout.scss, ..., ...,
- vendors.scss // Import Bootstrap,Fontawesome, ..., ...,
Pay attention to import the files in the correct order!
Little Extra:
In Laravel I've got used to compile vendors.scss as a separate file once I started the project to avoid that npm run watch compile (bootstrap, fontawesome, etc.) at every save (Don't forget to add the vendors.css public path to the head of your documents and when you go to production to minify it with npm run production).
My webpack.mix.js looks like:
const mix = require("laravel-mix");
mix.js('resources/js/app.js', 'public/js');
mix.sass("resources/sass/app.scss", "public/css");
// Uncomment the next line to compile vendors scss
//mix.sass("resources/sass/vendors.scss", "public/css");
i got a "little" bug on my website. Here is the code im using:
product.tpl
{else}
href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}"
data-fancybox-group="other-views"
class="fancybox{if $image.id_image == $cover.id_image} shown{/if}"
global.css
.fancybox-skin {
background: #f4f5f7 !important; }
.fancybox-skin .fancybox-close {
width: 28px;
height: 28px;
background: none;
font-size: 28px;
line-height: 28px;
color: #333333;
text-align: center;
background: #f4f5f7!important;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px; }
.fancybox-skin .fancybox-close:hover {
color: #515151; }
.fancybox-skin .fancybox-close:after {
content: "\f057";
font-family: "FontAwesome"; }
Here is a Link to a product.
If you enlarge the picture by clicking on it, and hover to one of the sites and than jump to one of the other pictures you can see that the background is moving. In Internet Explorer it is working fine.
Now:
/* 1920x1200 ----------- */
#media only screen
and (min-width : 1681px) {
/* Styles */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 1.42857;
background: #f4f5f7 url('http://evoxity.net/themes/default-bootstrap/img/background/1920x1200.jpg');
margin: 0 ;
background-repeat: no-repeat scroll;
-moz-background-size:cover;
overflow: auto;
background-position:center 0;
}
}
I have the following code for my webpage, and when I use it in Chrome every thing is fine, but when I use it in Firefox the style is changed.
I need to make the Firefox style same like Chrome style, so any suggestion for that?
I mention in the code below what I tried to do.
<html>
<head>
<style>
div
{
background-color: #FFFFFF;
border: 1px solid #86B3E6;
color: 2F62AC;
display: block;
font-size: 17px;
font-weight: bold;
margin: 10px;
padding: 5px 5px;
text-decoration: none;
direction:rtl;
border-radius: 8px;
}
a
{
background-color: #FFFFFF;
color: 2F62AC;
font-size: 17px;
font-weight: bold;
text-decoration: none;
direction:rtl;
position: relative;
border-radius: 8px;
border: none;
padding: 12px 10px;
text-align: center;
}
a.option1
{
//Not centered but filled all area
display: flex;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}
a.option2
{
//Not centered and not filled all area
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center; */
}
a:active, a:hover {
background-color: #2F62AC;
color: #FFFFFF;
}
</style>
</head>
<body>
<div><a class="option1" href="#">Option 1</a></div>
<div><a class="option2" href="#">Option 2</a></div>
</body>
</html>
Best regards.
You do not need Flexbox for this purpose: just display: block on your anchor:
http://cssdeck.com/labs/ocotcmpf
div
{
background-color: #FFFFFF;
border: 1px solid #86B3E6;
color: 2F62AC;
display: block;
font-size: 17px;
font-weight: bold;
margin: 10px;
padding: 5px 5px;
text-decoration: none;
direction:rtl;
border-radius: 8px;
}
a
{
background-color: #FFFFFF;
color: 2F62AC;
font-size: 17px;
font-weight: bold;
text-decoration: none;
direction:rtl;
position: relative;
border-radius: 8px;
border: none;
padding: 12px 10px;
text-align: center;
display: block; /* here */
}
a:active, a:hover {
background-color: #2F62AC;
color: #FFFFFF;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
my website url is:www.swadihandicrafts.com.when ever open in chrome browser product description overlaping with image.i'm tried lot.but i'm not able to solve that.please give any solution for that.thanks in advance.
<?php
/**
* Magento
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE_AFL.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license#magentocommerce.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade Magento to newer
* versions in the future. If you wish to customize Magento for your
* needs please refer to http://www.magentocommerce.com for more information.
*
* #category design
* #package base_default
* #copyright Copyright (c) 2012 Magento Inc. (http://www.magentocommerce.com)
* #license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
*/
/**
* Product description template
*
* #see Mage_Catalog_Block_Product_View_Description
*/
?>
<?php $_description = $this->getProduct()->getDescription(); ?>
<?php if ($_description): ?>
<h2><?php echo $this->__('Details') ?></h2>
<div class="std">
<?php echo
$this->helper('catalog/output')->productAttribute($this->getProduct(), $_description, 'description') ?>
</div>
<?php endif; ?>
style.css
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, em, img, strong, ol, ul, li, table, tr, th, td, form { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; background: transparent; }
table { border-collapse: collapse; border-spacing: 0; }
input, button{ overflow: visible; }
html, body { height: 100%; min-height: 100%; }
body { font: normal 11px/14px tahoma, arial, verdana, sans-serif; text-align:center; color: #333; background: #f6f6f6; }
p { padding: 0 0 10px; }
ul { padding: 0 0 0 16px; }
li { padding: 0 0 8px; }
a { text-decoration: none; }
a:link, a:visited { color: #1d64c1; }
a:hover, a:active { color: #6687dd; text-decoration: underline; }
.clear, .box .content { display: inline-block; }
.clear:after, .box .content:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .clear, * html .box .content { height: 1%; }
.clear, .box .content { display: block; }
.none, .hidden { display: none; }
.page { position: relative; width: 100%; min-width: 750px; min-height: 100%; }
* html .page { height: 100%; }
.page .header { width: 100%; height: 53px; text-align: left; background: #363b47 url('../img/common/top_bg.png') 0 0 repeat-x; }
.page .header .company-logo { float: right; display: block; margin: 9px 20px 0 10px; width: 100px; height: 31px; overflow: hidden; text-indent: -9999px; background: url(../img/common/top-company-logo.gif) no-repeat; }
.page .header .header-area { height: 53px; }
.page .header h1 { float: left; width: 210px; height: 50px; text-align: left; }
.page .header h1 a { display: block; margin: 0 0 0 10px; width: 210px; height: 50px; overflow: hidden; text-indent: -9999px; background: url(../img/common/def_plesk_logo.gif) no-repeat; }
.page .header .header-text { float: right; font-size: 11px; }
.page .header .header-text a { float: left; margin: 11px 13px 0 0; color: #506cc6; text-decoration: none; font-size: 11px; }
.page .header .header-text a.txt-banner { margin-right: 10px; }
.page .header .header-text a strong { font-weight: normal; }
.page .header .header-text a.top-copyright { text-align: right; }
.wrapper { margin: 0 auto; padding: 24px 0 50px; width: 734px; text-align: left; }
#body { margin: 0 auto; padding: 24px 0 57px 0; width: 734px; text-align:left; }
.box { position: relative; background: #fff; border: 1px solid #c0c0c0; width:100%; }
.box .content { padding: 10px; position: relative; }
.box em { display: block; width: 11px; height: 11px; position: absolute; background: url('../img/common/box-corners.png') no-repeat; overflow: hidden; }
.box em.tl { background-position: 0 0; left:-1px; top:-1px;}
.box em.tr { background-position: -29px 0; right:-1px; top:-1px;}
.box em.bl { background-position: 0 -29px; left:-1px; bottom:-1px;}
.box em.br { background-position: -29px -29px; right:-1px; bottom:-1px;}
.globe { float: left; background: url('../img/common/globe.png') 0 0 no-repeat; width: 167px; height: 198px; margin: 0; }
.welcome { padding: 0 0 0 187px; }
h2 { margin: 5px 0 10px; padding: 10px 0 3px; font-size: 18px; font-weight: normal; color: #000; }
h3 { margin: 10px 0 5px 0; }
.hr { border-top: 1px solid #e0e0e0; margin-top: 5px; padding: 10px 0 0; overflow:hidden; }
.center { text-align: center; }
.products { width: 390px; float: right; }
.new-to-parallels { width: 330px; float: left; }
.column { width: 180px; }
.column.left { float: left; }
.column.right { float: right; }
.column strong { display: block; margin-bottom: 11px; }
.column p { display: block; margin-top: 15px; font-size: 10px; }
.column img { float:left; margin-right: 15px; width: 69px; }
.page .footer { position: absolute; left: 0; bottom: 0; border-top: 1px solid #c0c7fc; width: 100%; min-width: 300px; height: 38px; background: #d9e9ff url('../img/common/footer_bg.png') 0 0 repeat-x; }
.page .footer-area { height: 38px; font-size: 11px; text-align: left; color: #000; }
.page .footer .description { margin: 0; padding: 12px 10px 0; }
.icons-area { padding: 5px 10px 10px; text-align: center; background: url('../img/common/blocks_bg.png') 0 100% no-repeat; }
.icon { display: -moz-inline-box; display: inline-block; margin: 0 3px 12px 0; padding: 0; min-height: 32px; font: normal 11px/13px tahoma, arial, helvetica, sans-serif; text-decoration: none; text-align: left; vertical-align: top; color: #000; cursor: pointer; background-position: 50% 0; background-repeat: no-repeat; }
a.icon:link, a.icon:visited, a.icon:hover, a.icon:active { color: #000; text-decoration: none; }
.icon span { display: block; padding: 34px 0 0; width: 80px; text-align: center; cursor: pointer; }
#asp { background-image: url('../img/glyph/btn_asp_bg.gif'); }
#aspnet { background-image: url('../img/glyph/btn_aspdotnet_bg.gif'); }
#coldfusion { background-image: url('../img/glyph/btn_coldfusion_bg.gif'); }
#perl { background-image: url('../img/glyph/btn_perl_bg.gif'); }
#php { background-image: url('../img/glyph/btn_php_bg.gif'); }
#python { background-image: url('../img/glyph/btn_python_bg.gif'); }
#ssi { background-image: url('../img/glyph/btn_ssi_bg.gif'); }
#fcgi { background-image: url('../img/glyph/btn_fast_cgi_bg.gif'); }
#miva { background-image: url('../img/glyph/btn_miva_bg.gif'); }
.test { width: 680px; }
.test .pathbar { color: #7b7b7b; }
.test .pathbar a { text-decoration: underline; color: #7b7b7b; }
.test .pathbar a:hover { color: #39f; }
.test h2 { margin: 10px 0; font-size: 17px; font-weight: normal; }
.test .tab-content { border: 1px solid #a0b0e9; padding: 10px; background: #fff; }
iframe { border: 1px solid #a0b0e9; }
fieldset { border: 1px solid #e0e0e0; margin: 0; padding: 0 10px 10px; }
legend { margin: 0; padding: 0 2px 5px; vertical-align: middle; font-weight: bold; color: #000; }
.form-fields { padding-top: 6px; }
.formFields { margin: 5px 0; }
.formFields, .formFields input, .formFields select, .formFields textarea { font: normal 11px 'Segoe UI', Tahoma, Verdana, Arial, Helvetica, sans-serif; }
.formFields td.name { padding: 0 10px 10px 0; width: 200px; vertical-align: top; font-weight: bold; }
.buttonsContainer { margin-top: 10px; text-align: right; }
.buttonsContainer .commonButton { display: inline; margin-left: 14px; }
.buttonsContainer .commonButton span { display: none; }
.buttonsContainer .commonButton button { border: 0; width: 91px; height: 21px; text-align: center; white-space: nowrap; cursor: pointer; font: normal 11px 'Segoe UI', Tahoma, Verdana, Arial, Helvetica, sans-serif; background: transparent url('../img/glyph/btn_bg.gif') 0 0 no-repeat; }
.commonButton button[disabled] { color: #999; background-image: url('../img/glyph/btn_bg-disabled.gif'); }
#bid-ok button { padding-left: 8px; background-image: url('../img/glyph/btn_ok_bg.gif'); }
.commonButton button:hover { background-position: 0 -21px; }
.commonButton button[disabled]:hover { background-position: 0 0; }
.testRelults#testFailed { border: 1px solid #ccc; margin: 0 0 10px; padding: 10px 10px 10px 32px; background: #fde9e5 url('../img/icons/fail.gif') 10px 11px no-repeat; }
.testRelults#testSuccessful { border: 1px solid #ccc; margin: 0 0 10px; padding: 10px 32px; background: #bff7b4 url('../img/icons/success.gif') 10px 11px no-repeat; }
.testResult { font-weight: bold; }
.test-data { text-align: left; background: #fff; }
.test-data table { border-collapse: collapse; margin-bottom: 10px; width: 100%; color: #000; background-color: white; }
.test-data table th, .test-data table td { padding: 4px 6px; }
.test-data tr.subhead { background-color: #e8f4fe; }
.test-data tr.subhead th { border-bottom: 1px solid #b1c1f9; background: #e8f4fe url('../img/common/th-na-bg.gif') 0 0 repeat-x; }
.test-data th.alt { border-top: 1px solid #b1c1f9; border-bottom: 1px solid #b1c1f9; color: #000; background-color: #dbebff; }
.test-data tr.alt { background-color: #ebf4ff; }
The problem appears when applying clear on the wrapper element. When you remove the clear, the bug goes away.
According to the W3C specs regarding the clear property:
This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.
So i have a popup window with a scroller. For scroller i used basic css element overflow: scroll. But the problem is scroller appears on the side and on the bottom. Now i want to know if there is anyway to remove the bottom scroller, because even though its locked its useless to me and it would look better without it. Ive googled it and havent found anything so if you have a solution please share it. If you need any of the code tell me and i will post it.
This is "my" css for popup (i got the code from http://www.zurb.com/playground/reveal-modal-plugin):
.reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
background: #000;
background: rgba(0,0,0,.8);
z-index: 100;
display: none;
top: 0;
left: 0;
}
.reveal-modal {
visibility: hidden;
top: 100px;
left: 50%;
margin-left: -300px;
width: 520px;
height: 400px;
background: #eee url(modal-gloss.png) no-repeat -200px -80px;
position: absolute;
z-index: 101;
padding: 30px 40px 34px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
-box-shadow: 0 0 10px rgba(0,0,0,.4);
overflow:scroll;
}
.reveal-modal h1{
color: green;
font-size: 40px;
}
.reveal-modal strong{
font-style: inherit;
}
.reveal-modal.small { width: 200px; margin-left: -140px;}
.reveal-modal.medium { width: 400px; margin-left: -240px;}
.reveal-modal.large { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge { width: 800px; margin-left: -440px;}
.reveal-modal .close-reveal-modal {
font-size: 22px;
line-height: .5;
position: absolute;
top: 8px;
right: 11px;
color: #aaa;
text-shadow: 0 -1px 1px rbga(0,0,0,.6);
font-weight: bold;
cursor: pointer;
}
a better way of doing it would be
overflow-x:hidden;
overflow-y:auto;
That way it means that if a page gets bigger with jquery and then you need to scroll the view won't get smaller and affect your measurements
This should work:
overflow-x:hidden;
overflow-y:auto;