I have recently completed the One Month Rails tutorial and wanted to start customizing my design. I went ahead and purchase a theme off WrapBootstrap and have completed the following:
Added Javascript/CSS to Vendor folder
Included all images needed in Vendor folder
Updated manifest file to include any new javascript or stylesheets
For whatever reason it appears bootstrap is not being loaded properly when I attempt to access any page besides the index page.
For example: my users/sign up page which I customized the Devise View no longer inherits any of the styling previously used. What I want to accomplish is to have the index page load the WrapBootstrap theme and then for my other pages to load just as they previously did prior to messing with anything.
I understand that Heroku has special ways in handing the asset pipeline and hard coding assets is not the proper way of doing things. However, my styling is not functional on my local environment either.
Application.css:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require 'masonry/transitions'
*= require 'style.css'
*= require 'bootstrap.css'
*= require 'bootstrap.min.css'
*= require 'overwrite.css'
*= require 'animate.css'
*= require 'font-awesome.min.css'
*= require 'theme.css'
*= require 'simpletextrotator.css'
*= require 'default.css'
*= require_tree .
Application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require jquery.turbolinks
//= require turbolinks
//= require masonry/jquery.masonry
//= require jquery.js
//= require bootstrap.min.js
//= require custom.js
//= require wow.min.js
//= require mb.bgndGallery.js
//= require jquery.simple-text-rotator.min.js
//= require jquery.scrollTo.js
//= require jquery.nav.js
//= require modernizr.custom.js
//= require grid.js
//= require stellar.js
//= require_tree .
Home Page View:
<!DOCTYPE html>
<html>
<head>
<title>Alstar - Bootstrap 3 one page template</title>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- css -->
<link href="/assets//bootstrap.min.css" rel="stylesheet" media="screen">
<link href="/assets/style.css" rel="stylesheet" media="screen">
</head>
<body>
<!-- intro area -->
<div id="intro">
<div class="intro-text">
<div class="container">
<div class="col-md-12">
<div id="rotator">
<h1><span class="1strotate">We are changing the World.</span></h1>
<div class="line-spacer"></div>
<p><span class="2ndrotate">We connect brands with donation opportunities that empower their users.</span></p>
</div>
<div class="arrow-wrap"><a class="arrow-down scroll" href="#home-top"></a></div>
<br>
<br>
</div>
</div>
</div>
</div>
<!-- Services -->
<section id="services" class="home-section bg-white">
<div class="container">
<div class="row">
<div style="width: 100%;">
<div style="float: left; width: 33%;"><p><%= link_to "I'm a Charity", new_user_registration_path, class: "btn-primary-red btn-lg" %></p></div>
<div style="float: left; width: 33%;"><p><%= link_to "I'm a Donor", new_user_registration_path, class: "btn-primary-red btn-lg" %></p></div>
<div style="float: left; width: 33%;"><p><a class="btn-primary-red btn-lg" href="#about" role="button">I'm a Merchant</a></p></div>
<br style="clear: left;" />
</div>
<br>
<br>
<div class="col-md-offset-2 col-md-8">
<div class="section-heading">
<h2>Services</h2>
<div class="heading-line"></div>
<p>We’ve been building unique digital products, platforms, and experiences for the past 6 years.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="carousel-service" class="service carousel slide">
<!-- slides -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-12 col-md-offset-1 col-md-6">
<div class="wow bounceInLeft">
<h4>Website Design</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
</div>
<div class="col-sm-12 col-md-5">
<div class="screenshot wow bounceInRight">
<img src="/assets/screenshots/1.png" class="img-responsive" alt="" />
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12 col-md-offset-1 col-md-6">
<div class="wow bounceInLeft">
<h4>Brand Identity</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
</div>
<div class="col-sm-12 col-md-5">
<div class="screenshot wow bounceInRight">
<img src="/assets/screenshots/2.png" class="img-responsive" alt="" />
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-12 col-md-offset-1 col-md-6">
<div class="wow bounceInLeft">
<h4>Web & Mobile Apps</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>
</div>
<div class="col-sm-12 col-md-5">
<div class="screenshot wow bounceInRight">
<img src="/assets/screenshots/3.png" class="img-responsive" alt="" />
</div>
</div>
</div>
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-service" data-slide-to="0" class="active"></li>
<li data-target="#carousel-service" data-slide-to="1"></li>
<li data-target="#carousel-service" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
</div>
</section>
<!-- About -->
<section id="about" class="home-section bg-red">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="section-heading">
<br>
<br>
<br>
<h2>About us</h2>
<div class="heading-line"></div>
<p>We’ve been building a beutiful checkout process that connects merchants with their loyal customers.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="box-team wow bounceInDown" data-wow-delay="0.1s">
<img src="/assets/team/1.jpg" alt="" class="img-circle img-responsive" />
<h4>Dominique Vroslav</h4>
<p>Art Director</p>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3" data-wow-delay="0.3s">
<div class="box-team wow bounceInDown">
<img src="/assets/team/2.jpg" alt="" class="img-circle img-responsive" />
<h4>Thomas Jeffersonn</h4>
<p>Web Designer</p>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3" data-wow-delay="0.5s">
<div class="box-team wow bounceInDown">
<img src="/assets/team/3.jpg" alt="" class="img-circle img-responsive" />
<h4>Nola Maurin</h4>
<p>Illustrator</p>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3" data-wow-delay="0.7s">
<div class="box-team wow bounceInDown">
<img src="/assets/team/4.jpg" alt="" class="img-circle img-responsive" />
<h4>Mira Ladovic</h4>
<p>Typographer</p>
</div>
</div>
</div>
</div>
</section>
<!-- Parallax 1 -->
<section id="parallax1" class="home-section parallax" data-stellar-background-ratio="0.5">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="color-light">
<h2 class="wow bounceInDown" data-wow-delay="1s">Details are the key for perfection</h2>
<p class="lead wow bounceInUp" data-wow-delay="2s">We mix all detailed things together</p>
</div>
</div>
</div>
</div>
</section>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-service" data-slide-to="0" class="active"></li>
<li data-target="#carousel-service" data-slide-to="1"></li>
<li data-target="#carousel-service" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
</div>
</section>
<!-- Works -->
<section id="portfolio" class="home-section bg-gray">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="section-heading">
<h2>Works</h2>
<div class="heading-line"></div>
<p>We’ve been building unique digital products, platforms, and experiences for the past 6 years.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul id="og-grid" class="og-grid">
<li>
<a href="#" data-largesrc="/assets/works/1.jpg" data-title="Portfolio title" data-description="Duo te dico volutpat, unum elit oblique per id. Ne duo mollis sapientem intellegebat. Per at augue vidisse percipit, pri vocibus assueverit interesset ut, no dolore luptatum incorrupte nec. In mentitum forensibus nec, nibh eripuit ut pri, tale illud voluptatum ut sea. Sed oratio repudiare ei, cum an magna labitur, eu atqui augue mei. Pri consul detracto eu, solet nusquam accusam ex vim, an movet interesset necessitatibus mea.">
<img src="/assets/works/thumbs/1.jpg" alt=""/>
</a>
</li>
<li>
<a href="#" data-largesrc="/assets/works/2.jpg" data-title="Portfolio title" data-description="Mea an eros periculis dignissim, quo mollis nostrum elaboraret et. Id quem perfecto mel, no etiam perfecto qui. No nisl legere recusabo nam, ius an tale pericula evertitur, dicat phaedrum qui in. Usu numquam legendos in, voluptaria sadipscing ut vel. Eu eum mandamus volutpat gubergren, eos ad detracto nominati, ne eum idque elitr aliquam.">
<img src="/assets/works/thumbs/2.jpg" alt=""/>
</a>
</li>
<li>
<a href="#" data-largesrc="/assets/works/3.jpg" data-title="Portfolio title" data-description="Vim ad persecuti appellantur. Eam ignota deterruisset eu, in omnis fierent convenire sed. Ne nulla veritus vel, liber euripidis in eos. Postea comprehensam vis in, detracto deseruisse mei ea. Ex sadipscing deterruisset concludaturque quo.">
<img src="/assets/works/thumbs/3.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="/assets/works/4.jpg" data-title="Portfolio title" data-description="In mentitum forensibus nec, nibh eripuit ut pri, tale illud voluptatum ut sea. Sed oratio repudiare ei, cum an magna labitur, eu atqui augue mei. Pri consul detracto eu, solet nusquam accusam ex vim, an movet interesset necessitatibus mea.">
<img src="/assets/works/thumbs/4.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/5.jpg" data-title="Portfolio title" data-description="Duo te dico volutpat, unum elit oblique per id. Ne duo mollis sapientem intellegebat. Per at augue vidisse percipit, pri vocibus assueverit interesset ut, no dolore luptatum incorrupte nec. In mentitum forensibus nec, nibh eripuit ut pri, tale illud voluptatum ut sea">
<img src="assets/works/thumbs/5.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/6.jpg" data-title="Portfolio title" data-description="Id elit saepe pro. In atomorum constituam definitionem quo, at torquatos sadipscing eum, ut eum wisi meis mentitum. Probo feugiat ea duo. An usu platonem instructior, qui dolores inciderint ad. Te elit essent mea, vim ne atqui legimus invenire, ad dolor vitae sea.">
<img src="assets/works/thumbs/6.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/7.jpg" data-title="Portfolio title" data-description="Duo te dico volutpat, unum elit oblique per id. Ne duo mollis sapientem intellegebat. Per at augue vidisse percipit, pri vocibus assueverit interesset ut, no dolore luptatum incorrupte nec. In mentitum forensibus nec, nibh eripuit ut pri, tale illud voluptatum ut sea. Sed oratio repudiare ei, cum an magna labitur, eu atqui augue mei.">
<img src="assets/works/thumbs/7.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="asssets/works/8.jpg" data-title="Portfolio title" data-description="No nisl legere recusabo nam, ius an tale pericula evertitur, dicat phaedrum qui in. Usu numquam legendos in, voluptaria sadipscing ut vel. Eu eum mandamus volutpat gubergren, eos ad detracto nominati, ne eum idque elitr aliquam.">
<img src="assets/works/thumbs/8.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/9.jpg" data-title="Portfolio title" data-description="Lorem ipsum dolor sit amet, ex pri quod ferri fastidii. Mazim philosophia eum ad, facilisis laboramus te est. Eam magna fabellas ut. Ne vis diceret accumsan salutandi, pro in impedit accusamus dissentias, ut nonumy eloquentiam ius.">
<img src="assets/works/thumbs/9.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/10.jpg" data-title="Portfolio title" data-description="Duo te dico volutpat, unum elit oblique per id. Ne duo mollis sapientem intellegebat. Per at augue vidisse percipit, pri vocibus assueverit interesset ut, no dolore luptatum incorrupte nec. In mentitum forensibus nec, nibh eripuit ut pri, tale illud voluptatum ut sea. Sed oratio repudiare ei, cum an magna labitur, eu atqui augue mei. Pri consul detracto eu, solet nusquam accusam ex vim.">
<img src="assets/works/thumbs/10.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/11.jpg" data-title="Portfolio title" data-description="Vim ad persecuti appellantur. Eam ignota deterruisset eu, in omnis fierent convenire sed. Ne nulla veritus vel, liber euripidis in eos. Postea comprehensam vis in, detracto deseruisse mei ea. Ex sadipscing deterruisset concludaturque quo.">
<img src="assets/works/thumbs/11.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="assets/works/12.jpg" data-title="Portfolio title" data-description="Mea an eros periculis dignissim, quo mollis nostrum elaboraret et. Id quem perfecto mel, no etiam perfecto qui. No nisl legere recusabo nam, ius an tale pericula evertitur, dicat phaedrum qui in. Usu numquam legendos in, voluptaria sadipscing ut vel. Eu eum mandamus volutpat gubergren, eos ad detracto nominati, ne eum idque elitr aliquam.">
<img src="assets/works/thumbs/12.jpg" alt="img01"/>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Parallax 2 -->
<section id="parallax2" class="home-section parallax" data-stellar-background-ratio="0.5">
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="clients">
<li class="wow fadeInDown" data-wow-delay="0.3s"><img src="assets/clients/1.png" alt="" /></li>
<li class="wow fadeInDown" data-wow-delay="0.6s"><img src="assets/clients/2.png" alt="" /></li>
<li class="wow fadeInDown" data-wow-delay="0.9s"><img src="assets/clients/3.png" alt="" /></li>
<li class="wow fadeInDown" data-wow-delay="1.1s"><img src="assets/clients/4.png" alt="" /></li>
</ul>
</div>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact" class="home-section bg-white">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="section-heading">
<h2>Contact us</h2>
<div class="heading-line"></div>
<p>If you have any question or just want to say 'hello' to Alstar web studio please
fill out form below and we will be get in touch with you within 24 hours. </p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-8">
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<input type="text" class="form-control" id="inputName" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<input type="text" class="form-control" id="inputSubject" placeholder="Subject">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<textarea name="message" class="form-control" rows="3" placeholder="Message"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<button type="button" class="btn btn-theme btn-lg btn-block">Send message</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer
================================================== -->
<footer id="contact" class="footer">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="col-sm-3 col-md-3">
<div class="footer-logo">
<h2>Prestige</h2>
<p>1024 Main Street, Vancouver BC<br>+1 (123) 456-7890</p>
<br>
<p class="muted">© 2013 Prestige Inc.</p>
Terms of Service
Privacy
</div>
</div>
<div class="col-sm-3 col-md-3">
<h3>Product</h3>
<ul class="list-unstyled">
<li>Product for iOS</li>
<li>Product for Android</li>
<li>Product for Windows</li>
</ul>
</div>
<div class="col-sm-3 col-md-3">
<h3>Company</h3>
<ul class="list-unstyled">
<li>About Us</li>
<li>Our Team</li>
<li>Jobs <span class="label label-info">We're hiring!</span></li>
</ul>
</div>
<div class="col-sm-3 col-md-3">
<h3>Documentation</h3>
<ul class="list-unstyled">
<li>Product Help</li>
<li>Developer API</li>
<li>Product Markdown</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<a class="icon" href="http://www.twitter.com/dparrelli" target="_blank"><i class="fa fa-twitter"></i></a>
<a class="icon" href="#" target="_blank"><i class="fa fa-facebook"></i></a>
<a class="icon" href="http://www.dribbble.com/dparrelli" target="_blank"><i class="fa fa-dribbble"></i></a>
<a class="icon" href="http://www.workingnomads.co" target="_blank"><i class="fa fa-globe"></i></a>
</div>
</div>
</div>
</footer>
<!-- js -->
<script src="/assets/jquery.js"></script>
<script src="/assets/bootstrap.min.js"></script>
<script src="/assets/wow.min.js"></script>
<script src="/assets/mb.bgndGallery.js"></script>
<script src="/assets/mb.bgndGallery.effects.js"></script>
<script src="/assets/jquery.simple-text-rotator.min.js"></script>
<script src="/assets/jquery.scrollTo.js"></script>
<script src="/assets/jquery.nav.js"></script>
<script src="/assets/modernizr.custom.js"></script>
<script src="/assets/grid.js"></script>
<script src="/assets/stellar.js"></script>
<script src="/assets/custom.js"></script>
</html>
Any ideas what is getting mixed up here? Should I be putting the page.css under page.css.scss instead of in the application.css files? Thank you!
you should add your css and javascript files to assests/stylesheets and assests/javascripts respectively. and add these to head of your views/layout/application.html.erb or any other layout you are using:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
I hope that will work.
Related
I have a certain number of cards. I want to display them in two columns of fixed height in the following way: first I want to fill col number 1; when the end of col1 is reached, start filling col2 (see image).
How can I do that with Bootstrap 5?
cards stacked vertically on two columns
UPDATE
Here is my code:
<div class="container-lg">
<h2 class="">Technology Portal</h2>
<div class="row row-cols-md-2">
<div class="col col-links">
<div class="card text-left">
<div class="card-body">
<p class="imp-title">Card 1</p>
...
</div>
</div>
</div>
<div class="col col-links">
<div class="card text-left">
<div class="card-body">
<p class="imp-title">Card 2</p>
...
</div>
</div>
</div>
<div class="col col-links">
<div class="card text-left">
<div class="card-body">
<p class="imp-title">Card 3</p>
...
</div>
</div>
</div>
<div class="col col-links">
<div class="card text-left">
<div class="card-body">
<p class="imp-title">Card 4</p>
...
</div>
</div>
</div>
<div class="col col-links">
<div class="card text-left">
<div class="card-body">
<p class="imp-title">Card 5</p>
...
</div>
</div>
</div>
...
</div>
</div>
SOLUTION
Gahan Vig helped me to find the solution.
Here it is:
<style>
.masonry { /* Masonry container */
column-count: 2;
column-gap: 1em;
}
.item { /* Masonry bricks or child elements */
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
</style>
<div class="masonry">
<div class="card item">
<h1>card1</h1>
</div>
<div class="card item">
<h1>card2</h1>
</div>
<div class="card item">
<h1>card3</h1>
</div>
<div class="card item">
<h1>card4</h1>
</div>
<div class="card item">
<h1>card5</h1>
</div>
<div class="card item">
<h1>card6</h1>
</div>
<div class="card item">
<h1>card7</h1>
</div>
<div class="card item">
<h1>card8</h1>
</div>
<div class="card item">
<h1>card9</h1>
</div>
<div class="card item">
<h1>card10</h1>
</div>
</div>
More information here:
https://w3bits.com/css-masonry/
Such type of layout is known as masonry layout. Visit this stackoverflow link to know more how to createa vertical masonry layout
Your finished code after creating the layout will look something like this
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
.col-links{
display: inline-block;
margin: 0 0 20px;
page-break-inside: avoid;
break-inside: avoid;
width: 50%;
}
.row{
column-count: 2;
column-gap: 20px;
column-fill: balance;
margin: 20px auto 0;
padding: 2rem;
}
</style>
</head>
<body>
<div class="container-lg">
<h2 class="">Technology Portal</h2>
<div class="row row-cols-md-2 w-100">
<div class="col col-links">
<div class="card text-left">
<div class="card-body">
<p class="imp-title">Card 1</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus sequi optio explicabo delectus quaerat recusandae consectetur illo eius tempora, aperiam inventore sint fuga eum, error cum corrupti eos iure neque veniam repellat consequatur iusto quae dolor maiores. Similique quisquam nam ducimus ipsum sit quidem consectetur eaque sequi optio non cumque atque eius rerum vitae reprehenderit perferendis, sed eligendi modi inventore architecto sunt labore! Repellat magni eos officia ducimus mollitia vero necessitatibus harum accusantium perferendis explicabo. Dicta quo, sapiente fugit cumque voluptatibus ipsum neque atque, deleniti, debitis tenetur in dolore saepe molestias eum. Eius, error incidunt hic obcaecati vero ipsum nobis.
</div>
</div>
</div>
<div class="col col-links">
<div class="card text-left">
<div class="card-body">
<p class="imp-title">Card 2</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus maiores corporis placeat magnam laboriosam fugiat ut assumenda, aperiam sequi rerum reprehenderit vitae animi quasi neque error, amet nulla quae ea. Eius, consequuntur enim architecto incidunt facere fuga, nam modi ea, maxime labore nisi nobis eveniet deleniti quia expedita cum blanditiis?
</div>
</div>
</div>
<div class="col col-links">
<div class="card text-left">
<div class="card-body">
<p class="imp-title">Card 3</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, dolorum.
</div>
</div>
</div>
<div class="col col-links">
<div class="card text-left">
<div class="card-body">
<p class="imp-title">Card 4</p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sequi provident facilis voluptatem voluptate neque illum temporibus sit beatae, eum id iste possimus eveniet inventore ad quaerat hic, asperiores repellendus quia error debitis mollitia culpa, in delectus rem. Dignissimos voluptates voluptatem ut! Eum adipisci illo aliquam officiis hic doloribus quos odit accusantium dolorem sapiente, esse facilis exercitationem asperiores! Quas, consectetur, corporis eum similique earum quibusdam aliquam maxime temporibus animi, odio ratione nesciunt quaerat. Odit quos atque sit porro quod perspiciatis deleniti!
</div>
</div>
</div>
<div class="col col-links">
<div class="card text-left">
<div class="card-body">
<p class="imp-title">Card 5</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio labore numquam culpa qui hic id libero soluta illo corporis inventore, deserunt porro corrupti nihil repudiandae.
</div>
</div>
</div>
...
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</html>
I am trying to display IMDB rating through IMDB plugin HTML snippet in an angularDart app but displaying it through components doesn't works. It only displays the logo and doesn't renders the scripts which displays the rating.
app_component.html
<div class="material-content">
<header class="material-header shadow">
<div class="material-header-row">
<span class="material-header-title">SIMPLE TITLE</span>
<div class="material-spacer"></div>
<div class="header-navigation">
<nav class="material-navigation">
<a>Link 1</a>
</nav>
<nav class="material-navigation">
<a>Link 2</a>
</nav>
<nav class="material-navigation">
<a>Link 3</a>
</nav>
</div>
</div>
</header>
<div>
Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo
et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc
veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an
legere iriure blandit. Veri iisque accusamus an pri.
</div>
<span class="imdbRatingPlugin" data-user="ur69296978" data-title="tt7215444" data-style="p1"><a href="https://www.imdb.com/title/tt7215444/?ref_=plg_rt_1"><img src="https://ia.media-imdb.com/images/G/01/imdb/plugins/rating/images/imdb_46x22.png" alt=" The Final Year
(2017) on IMDb" />
</a></span><script>(function(d,s,id){var js,stags=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return;}js=d.createElement(s);js.id=id;js.src="https://ia.media-imdb.com/images/G/01/imdb/plugins/rating/js/rating.js";stags.parentNode.insertBefore(js,stags);})(document,"script","imdb-rating-api");</script>
<div class="controls">
<h3>Options</h3>
<material-toggle [(checked)]="end" label="end">
</material-toggle>
<material-toggle [(checked)]="customWidth" label="custom width">
</material-toggle>
</div>
</div>
app_component.dart
import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
#Component(
selector: 'my-app',
directives: const [
materialDirectives,
DeferredContentDirective,
MaterialButtonComponent,
MaterialIconComponent,
MaterialPersistentDrawerDirective,
MaterialToggleComponent,
MaterialListComponent,
MaterialListItemComponent,
],
templateUrl: 'app_component.html',
styleUrls: const [
'app_component.css',
'package:angular_components/app_layout/layout.scss.css',
],
)
class ApprComponent {
bool customWidth = false;
bool end = false;
}
You can't add <script> tags to Angular component templates.
Angular will just drop it.
You can add the script tag imperatively though.
The code would look quite similar to this TS example Adding script tags in Angular2 component template
Angular disallow that kind of usage for safety reason.
But you can try dart_browser_loader package.
ngAfterViewInit() async {
await loadScript(
'https://ia.media-imdb.com/images/G/01/imdb/plugins/rating/js/rating.js',
id: 'imdb-rating-api',
);
}
it will load the script you want in the head of your html page
Inside App component
You can execute external script inside angular component like this:
ngOnInit() {
const _script = '<script>(function(d,s,id){var js,stags=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return;}js=d.createElement(s);js.id=id;js.src="https://ia.media-imdb.com/images/G/01/imdb/plugins/rating/js/rating.js";stags.parentNode.insertBefore(js,stags);})(document,"script","imdb-rating-api")';
const fun = new Function(script);
}
It will execute your external script.
I'm using the part with the 8 images of this template as a photogallery.
Template
But if my images has different heights, they will be aligned so the top of the images will fit each other. I need them to be aligned, so the bottom of the images are aligned.
How can I do that?
My link is showing both code and the templates I use:-) The problem with this code is the vertical align of the 8 images, if they have different hights. They will be aligned so the top of the images fit each other. What I need, is that the 8 images is buttom aligned to each other.
<!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Karma">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Karma", sans-serif}
.w3-bar-block .w3-bar-item {padding:20px}
</style>
<body>
<!-- Sidebar (hidden by default) -->
<nav class="w3-sidebar w3-bar-block w3-card w3-top w3-xlarge w3-animate- left" style="display:none;z-index:2;width:40%;min-width:300px" id="mySidebar">
<a href="javascript:void(0)" onclick="w3_close()"
class="w3-bar-item w3-button">Close Menu</a>
Food
About
</nav>
<!-- Top menu -->
<div class="w3-top">
<div class="w3-white w3-xlarge" style="max-width:1200px;margin:auto">
<div class="w3-button w3-padding-16 w3-left" onclick="w3_open()">☰</div>
<div class="w3-right w3-padding-16">Mail</div>
<div class="w3-center w3-padding-16">My Food</div>
</div>
</div>
<!-- !PAGE CONTENT! -->
<div class="w3-main w3-content w3-padding" style="max-width:1200px;margin-top:100px">
<!-- First Photo Grid-->
<div class="w3-row-padding w3-padding-16 w3-center" id="food">
<div class="w3-quarter">
<img src="/w3images/sandwich.jpg" alt="Sandwich" style="width:100%">
<h3>The Perfect Sandwich, A Real NYC Classic</h3>
<p>Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
<div class="w3-quarter">
<img src="/w3images/steak.jpg" alt="Steak" style="width:100%">
<h3>Let Me Tell You About This Steak</h3>
<p>Once again, some random text to lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
<div class="w3-quarter">
<img src="/w3images/cherries.jpg" alt="Cherries" style="width:100%">
<h3>Cherries, interrupted</h3>
<p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
<p>What else?</p>
</div>
<div class="w3-quarter">
<img src="/w3images/wine.jpg" alt="Pasta and Wine" style="width:100%">
<h3>Once Again, Robust Wine and Vegetable Pasta</h3>
<p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
</div>
<!-- Second Photo Grid-->
<div class="w3-row-padding w3-padding-16 w3-center">
<div class="w3-quarter">
<img src="/w3images/popsicle.jpg" alt="Popsicle" style="width:100%">
<h3>All I Need Is a Popsicle</h3>
<p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
<div class="w3-quarter">
<img src="/w3images/salmon.jpg" alt="Salmon" style="width:100%">
<h3>Salmon For Your Skin</h3>
<p>Once again, some random text to lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
<div class="w3-quarter">
<img src="/w3images/sandwich.jpg" alt="Sandwich" style="width:100%">
<h3>The Perfect Sandwich, A Real Classic</h3>
<p>Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
<div class="w3-quarter">
<img src="/w3images/croissant.jpg" alt="Croissant" style="width:100%">
<h3>Le French</h3>
<p>Lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
</div>
<!-- Pagination -->
<div class="w3-center w3-padding-32">
<div class="w3-bar">
«
1
2
3
4
»
</div>
</div>
<hr id="about">
<!-- About Section -->
<div class="w3-container w3-padding-32 w3-center">
<h3>About Me, The Food Man</h3><br>
<img src="/w3images/chef.jpg" alt="Me" class="w3-image" style="display:block;margin:auto" width="800" height="533">
<div class="w3-padding-32">
<h4><b>I am Who I Am!</b></h4>
<h6><i>With Passion For Real, Good Food</i></h6>
<p>Just me, myself and I, exploring the universe of unknownment. I have a heart f love and an interest of lorem ipsum and mauris neque quam blog. I want to share my world with you. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<hr>
<!-- Footer -->
<footer class="w3-row-padding w3-padding-32">
<div class="w3-third">
<h3>FOOTER</h3>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
<p>Powered by w3.css</p>
</div>
<div class="w3-third">
<h3>BLOG POSTS</h3>
<ul class="w3-ul w3-hoverable">
<li class="w3-padding-16">
<img src="/w3images/workshop.jpg" class="w3-left w3-margin-right" style="width:50px">
<span class="w3-large">Lorem</span><br>
<span>Sed mattis nunc</span>
</li>
<li class="w3-padding-16">
<img src="/w3images/gondol.jpg" class="w3-left w3-margin-right" style="width:50px">
<span class="w3-large">Ipsum</span><br>
<span>Praes tinci sed</span>
</li>
</ul>
</div>
<div class="w3-third w3-serif">
</footer>
<!-- End page content -->
</div>
<script>
// Script to open and close sidebar
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
</body>
</html>enter code here
I'm trying to loop through each Post in a Rails app where the class changes each time. Here's the layout in HTML, how would I create this in a rails <% #posts.each do |post| %> loop. The css classes go from style1 to style 6
<article class="style1">
<span class="image">
<img src="images/pic01.jpg" alt="" />
</span>
<a href="generic.html">
<h2>Magna</h2>
<div class="content">
<p>Sed nisl arcu euismod sit amet nisi lorem etiam dolor veroeros et feugiat.</p>
</div>
</a>
</article>
<article class="style2">
<span class="image">
<img src="images/pic02.jpg" alt="" />
</span>
<a href="generic.html">
<h2>Lorem</h2>
<div class="content">
<p>Sed nisl arcu euismod sit amet nisi lorem etiam dolor veroeros et feugiat.</p>
</div>
</a>
</article>
etc...
You can use each_with_index something like:
- #posts.each_with_index do |post, i|
%article{class: "style#{(i % 6) + 1}"}
%span.image
...
Sorry, that's in HAML instead of ERB. I don't use ERB anymore and have forgotten how it goes. But, hopefully that gives you a feel for how to use the each_with_index. You can read more in the docs.
ERB Example:
<%- #posts.each_with_index do |post, i| %>
<article class="style<%= (i % 6) + 1 %>">
<span class="image">
...
</span>
</article>
<% end %>
You can also modify yours CSS selectors instead:
article:nth-child(6n + 1){ color: peachpuff; }
article:nth-child(6n + 2){ color: deepskyblue; }
article:nth-child(6n + 3){ color: dimgray; }
article:nth-child(6n + 4){ color: forestgreen; }
article:nth-child(6n + 5){ color: gold; }
article:nth-child(6n + 6){ color: coral; }
Explanation here: https://css-tricks.com/how-nth-child-works/
Example here: https://codepen.io/alex3o0/pen/rzwwqm
You are seaching for the cycle helper.
<% #posts.each do |post| %>
<%= content_tag :div, class: cycle('style1', 'style2', 'style3') do %>
...
<% end %>
<% end %>
You can find more info here: https://apidock.com/rails/ActionView/Helpers/TextHelper/cycle
I have a multi page jQuery Mobile (1.40, with jQuery 1.10.2) page, like below. On iOS, the transition 'right' to the next page distorts the background image briefly. The same transition 'left' works as expected. It seems to work normally on Safari on Mac.
See this video to see what's happening :- http://cl.ly/3C1k3y1k2I0C/download/jQuery%20Mobile%20issue.mp4
HTML:
<div data-role="page" class="welcome" id="welcome1">
<div role="main" class="ui-content">
<h2 class="logo">Page 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
<div class="dots-container">
<ul class="dots">
<li class="on">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" class="welcome" id="welcome2">
<div role="main" class="ui-content">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
<div class="dots-container">
<ul class="dots">
<li>1</li>
<li class="on">2</li>
<li>3</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" class="welcome" id="welcome3">
<div role="main" class="ui-content">
<h2>Get Started</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
<div class="dots-container">
<ul class="dots">
<li>1</li>
<li>2</li>
<li class="on">3</li>
</ul>
</div>
</div><!-- /content -->
</div><!-- /page -->
CSS:
[data-role=page].welcome {
background: no-repeat center center fixed;
background-size:100%;
}
[data-role=page]#welcome1 {
background-image: url('images/welcome1.jpg');
}
[data-role=page]#welcome2 {
background-image: url('images/welcome2.jpg');
}
[data-role=page]#welcome3{
background-image: url('images/welcome3.jpg');
}