I am making a dark theme for a website. I have put a toggle button in the footer which is loaded on every page by using <landing-footer></landing-footer>.
The problem is that the toggle doesn't work on other pages and it also resets itself without reverting the effects it has when I change page.
I am pasting my footer.html and homepage and the page I tested it on.
footer.html
<footer class="ev-md-container ev-footer ev-dark-bg">
<div class="grad-container rm-grad-pad">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">EvalAI</h5>
<p class="text-light-gray">Evaluating state of the art in AI</p>
<ul class="inline-list">
<li><a class="text-light-gray" href="https://github.com/Cloud-CV/EvalAI" target="_blank"><i class="fa fa-github"></i></a></li>
<li><a class="text-light-gray" href="https://twitter.com/project_cloudcv" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li>
<div class="switch">
<label class="darktheme_text">
<input type="checkbox" id="switch" name="theme">
<span class="lever"></span>
Dark Mode
</label>
</div>
</li>
<!-- <li><a class="text-light-gray" href="#!"><i class="fa fa-facebook" target="_blank"></i></a></li> -->
</ul>
<p><a class="text-white">© CloudCV {{year}}</a></p>
</div>
<div class="col l4 offset-l0 s12">
<h5 class="white-text">Links</h5>
<ul>
<li><a class="text-light-gray" ui-sref="about-us">About Us</a></li>
<li><a class="text-light-gray" ui-sref="contact-us">Contact Us</a></li>
<li><a class="text-light-gray" ui-sref="our-team">Our Team</a></li>
<li><a class="text-light-gray" ui-sref="get-involved">Get Involved</a></li>
<li><a class="text-light-gray" ui-sref="privacy_policy">Privacy Policy</a></li>
<li><a class="text-light-gray" href="https://cloudcv.org">CloudCV Website</a></li>
</ul>
</div>
<div class="col l2 s12">
<h5 class="white-text">Stats</h5>
<ul>
<li>
<a class="github-button" href="https://github.com/Cloud-CV/EvalAI" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star Cloud-CV/EvalAI on GitHub">Star</a>
</li>
<li>
<a class="github-button" href="https://github.com/Cloud-CV/EvalAI/fork" data-icon="octicon-repo-forked" data-size="large" data-show-count="true" aria-label="Fork Cloud-CV/EvalAI on GitHub">Fork</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<script>
var checkbox = document.querySelector('input[name=theme]');
checkbox.addEventListener('change', function() {
if(this.checked) {
trans()
document.documentElement.setAttribute('data-theme', 'dark')
} else {
trans()
document.documentElement.setAttribute('data-theme', 'light')
}
})
let trans = () => {
document.documentElement.classList.add('transition');
window.setTimeout(() => {
document.documentElement.classList.remove('transition')
}, 1000)
}
</script>
landing.html
<div class="white-bg view-container flex-body">
<main-header></main-header>
<div class="content">
<!-- EvalAI into -->
<div class="grad-container">
<div class="row">
<div class="col s12 m8 l8">
<div class="grad-head">
<h3 class="text-dark-black"><strong>Evaluating state-of-the-art in AI</strong></h3>
<p class="text-med-black fs-18 w-300">EvalAI is an open source platform for evaluating and
comparing machine learning (ML) and artificial intelligence algorithms (AI) at scale.</p>
<div class="landing-buttons">
<ul class="inline-list">
<li>
<a ng-click="main.hostChallenge()" href="javascript:void(0)"
class="dark-link theme"><strong>Host Challenge</strong></a>
</li>
<li><a class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-14"
ui-sref="web.challenge-main">Participate</a></li>
</ul>
<br>
<br>
</div>
</div>
</div>
</div>
</div>
<section class="ev-container ev-details text-med-black ev-super-light-bg" id="ev-scroll-down">
<div class="grad-container text-med-black ">
<div class="row">
<h4 class="w-300 center">Features</h4>
</div>
<div class="row">
<div class="col s12 m2 l2">
<img src="/dist/images/features/protocols.png" alt="" width="100%">
</div>
<div class="col s12 m4 l4">
<h5 class="w-300">Custom evaluation protocol</h5>
<p class="w-300 fs-16">We allow creation of an arbitrary number of evaluation phases
and dataset splits, compatibility using any programming language, and organizing results in
both
public and private leaderboards.</p>
</div>
<div class="col s12 m2 l2">
<img src="/dist/images/features/remote.png" alt="" width="100%">
</div>
<div class="col s12 m4 l4">
<h5 class="w-300">Remote evaluation</h5>
<p class="w-300 fs-16">Certain large-scale challenges need special compute capabilities for
evaluation. If the challenge needs extra computational power, challenge organizers can
easily add their own cluster of worker nodes to process participant submissions while we
take care of hosting the challenge, handling user submissions, and maintaining the
leaderboard.</p>
</div>
</div>
<div class="row">
<div class="col s12 m2 l2">
<img src="/dist/images/features/docker.png" alt="" width="100%">
</div>
<div class="col s12 m4 l4">
<h5 class="w-300">Evaluation inside RL environments</h5>
<p class="w-300 fs-16">EvalAI lets participants submit code for their agent in the form of
docker images which are evaluated against test environments on the evaluation server. During
evaluation, the worker fetches the image, test environment, and the model snapshot and spins
up a new container to perform evaluation.</p>
</div>
<div class="col s12 m2 l2">
<img src="/dist/images/features/cli.png" alt="" width="100%">
</div>
<div class="col s12 m4 l4">
<h5 class="w-300">CLI support</h5>
<p class="w-300 fs-16">EvalAI-CLI is designed to extend the functionality of the EvalAI web
application to your command line to make the platform more accessible and terminal-friendly.
</p>
</div>
</div>
<div class="row">
<div class="col s12 m2 l2">
<img src="/dist/images/features/portability.png" alt="" width="100%">
</div>
<div class="col s12 m4 l4">
<h5 class="w-300">Portability</h5>
<p class="w-300 fs-16">EvalAI was designed with keeping in mind scalability and portability of
such a system from the very inception of the idea. Most of the components rely heavily on
open-source technologies – Docker, Django, Node.js, and PostgreSQL.</p>
</div>
<div class="col s12 m2 l2">
<img src="/dist/images/features/faster-eval.png" alt="" width="100%">
</div>
<div class="col s12 m4 l4">
<h5 class="w-300">Faster evaluation</h5>
<p class="w-300 fs-16">We warm-up the worker nodes at start-up by importing the challenge code
and pre-loading the dataset in memory. We also split the dataset into small chunks that are
simultaneously evaluated on multiple cores. These simple tricks result in faster evaluation
and reduces the evaluation time by an order of magnitude in some cases.</p>
</div>
</div>
</div>
</section>
<section class="ev-container ev-reverse-details text-med-black " id="ev-scroll-down">
<div class="grad-container text-med-black ">
<div class="row">
<h4 class="w-300 center">Popular challenges</h4>
</div>
<div class="row">
<div class="col s12 m3 l3" ng-repeat="challenge in main.challengeList.results track by $index"
ng-if="$index < 4"><a class="ev-card-hover"
ui-sref="web.challenge-main.challenge-page({challengeId:challenge.id})">
<div class="card ev-card-panel ev-challenge-card ev-card-hover">
<div class="card-image ev-card-image">
<img class="bg-img" ng-src="{{challenge.image}}">
<span class=" ev-card-title fs-14"><span><img
ng-src="{{challenge.image}}"></span>{{challenge.title}}</span>
</div>
<div class="card-content">
<p><strong class="text-light-black fs-12">Organized by</strong>
<br>
<span class="w-300 fs-16">{{challenge.creator.team_name}}</span>
</p>
<p><strong class="text-light-black fs-12">Starts on</strong>
<br>
<span class="w-300 fs-16">{{challenge.start_date | date:'medium'}}</span>
</p>
<p><strong class="text-light-black fs-12">Ends on</strong>
<br>
<span class="w-300 fs-16">{{challenge.end_date | date:'medium'}}</span>
</p>
</div>
<div class=" btn-card-detail waves-effect waves-dark w-300 fs-14"> <strong>View Details
</strong> </div>
</div>
</a>
</div>
<div ng-if="!main.challengeList.count" class="row">
<p class="text-dark-black w-300 center fs-16">Sorry! there are no featured challenges. Please
check again later.</p>
</div>
</div>
</div>
</section>
<!-- organizatons section -->
<section class="ev-container ev-reverse-details text-med-black ev-super-light-bg " id="ev-scroll-down">
<div class="grad-container text-med-black ">
<div class="row">
<div class="col s12 m12 l12">
<div class="row">
<h4 class="w-300 center">Partner Organizations</h4>
</div>
<div class="row">
<div class="col s12 l2">
<div class="org-logo">
<img src="dist/images/organizations/aptiv.png" id="aptiv-logo">
</div>
</div>
<div class="col s12 l2">
<div class="org-logo">
<img src="dist/images/organizations/cmu.png" id="cmu-logo">
</div>
</div>
<div class="col s12 l2">
<div class="org-logo">
<img src="dist/images/organizations/draper.png" id="draper-logo">
</div>
</div>
<div class="col s12 l2">
<div class="org-logo">
<img src="dist/images/organizations/ebay.png" id="ebay-logo">
</div>
</div>
<div class="col s12 l2">
<div class="org-logo">
<img src="dist/images/organizations/fb.png" id="fb-logo">
</div>
</div>
<div class="col s12 l2">
<div class="org-logo">
<img src="dist/images/organizations/gt.png" id="gt-logo">
</div>
</div>
</div>
<div class="row">
<div class="col s12 l2">
<div class="org-logo">
<img src="dist/images/organizations/google.png" id="google-logo">
</div>
</div>
<div class="col s12 l2">
<div class="org-logo">
<img src="dist/images/organizations/ibm.png" id="ibm-logo">
</div>
</div>
<div class="col s12 l2">
<div class="org-logo">
<img src="dist/images/organizations/illinois.png" id="uiuc-logo">
</div>
</div>
<div class="col s12 l2">
<div class="org-logo">
<img src="dist/images/organizations/iitm.png" id="iitm-logo">
</div>
</div>
<div class="col s12 l2">
<div class="org-logo">
<img src="dist/images/organizations/intel.png" id="intel-logo">
</div>
</div>
<div class="col s12 l2">
<div class="org-logo">
<img src="dist/images/organizations/ju.png" id="ju-logo">
</div>
</div>
</div>
<div class="row">
<div class="col s12 l2">
<div class="org-logo">
<img src="dist/images/organizations/mapillary.png" id="mapillary-logo">
</div>
</div>
<div class="col s12 l2">
<div class="org-logo">
<img src="dist/images/organizations/mit.png" id="mit-logo">
</div>
</div>
<div class="col s12 l2">
<div class="org-logo">
<img src="dist/images/organizations/nu.png" id="nu-logo">
</div>
</div>
<div class="col s12 l2">
<div class="org-logo">
<img src="dist/images/organizations/siop.png" id="siop-logo">
</div>
</div>
<div class="col s12 l2">
<div class="org-logo">
<img src="dist/images/organizations/stanford.png" id="stanford-logo">
</div>
</div>
<div class="col s12 l2">
<div class="org-logo">
<img src="dist/images/organizations/adelaide.png" id="adelaide-logo">
</div>
</div>
</div>
<div class="row">
<div class="col s12 l2">
<div class="org-logo">
<img src="dist/images/organizations/umbc.png" id="umbc-logo">
</div>
</div>
<div class="col s12 l2">
<div class="org-logo">
<img src="dist/images/organizations/pitt.png" id="pitt-logo">
</div>
</div>
<div class="col s12 l2">
<div class="org-logo">
<img src="dist/images/organizations/vt.png" id=vt-logo>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Arxiv Entry -->
<section class="ev-container ev-reverse-details text-med-black " id="ev-scroll-down">
<div class="grad-container text-med-black ">
<div class="row">
<h4 class="w-300 center">Cite our work</h4>
</div>
<div class="row">
<div class="col s12 m12 l12">
<h5 class="w-400">EvalAI: Towards Better Evaluation Systems for AI Agents</h5>
<span class="w-300 fs-16">Deshraj Yadav, Rishabh Jain, Harsh Agrawal, Prithvijit Chattopadhyay,
Taranjeet Singh, Akash Jain, Shiv Baran Singh, Stefan Lee, Dhruv Batra</span>
</div>
</div>
<div class="row">
<a href="https://arxiv.org/abs/1902.03570" target="_blank">
<img src="dist/images/evalai-paper.jpg" alt="" width="100%" class="thumb">
</a>
</div>
</div>
</section>
</div>
<landing-footer></landing-footer>
page i tested(challenge-page.html)
<div class="white-bg view-container flex-body">
<main-header></main-header>
<div class="content">
<div class="grad-container grad-vh">
<div class="col s12 m6 ">
<section class="ev-sm-container ev-view challenge-container">
<div class="ev-md-container ev-card-panel ev-z-depth-5 challenge-title-container ">
<div class="row">
<div class="col s12 m3 l2">
<div class="image-container">
<img src="{{featured_challenge.page.image}}" width="100%">
</div>
</div>
<div class="col m9 l10">
<div class="card-content">
<p><span class="fs-18"><strong>{{featured_challenge.page.title}}</strong></span>
<br>
<span ng-if="featured_challenge.page.creator.team_url != ''"><strong class="text-light-black">Organized by:</strong><a class="orange-text" href="{{featured_challenge.page.creator.team_url}}" target="_blank"> {{featured_challenge.page.creator.team_name}} </a></span>
<span ng-if="featured_challenge.page.creator.team_url == ''"><strong class="text-light-black">Organized by:</strong> {{featured_challenge.page.creator.team_name}} </span>
</p>
</div>
</div>
</div>
<div class="row rm-row-bot">
<div class="col s12">
<ul class="inline-list rm-gut">
<li><a ui-sref=".overview" ui-sref-active="active-challenge" class="text-light-black w-500"><i class="fa fa-info"></i> Overview</a></li>
<li><a ui-sref=".evaluation" ui-sref-active="active-challenge" class="text-light-black w-500"><i class="fa fa-bar-chart-o"></i> Evaluation</a></li>
<li><a ui-sref=".phases" ui-sref-active="active-challenge" class="text-light-black w-500"><i class="fa fa-level-up"></i> Phases</a></li>
<li ng-if="!featured_challenge.isParticipated"><a ui-sref=".participate" ui-sref-active="active-challenge" class="text-light-black w-500"><i class="fa fa-free-code-camp"></i> Participate</a></li>
<li><a ui-sref=".leaderboard" ui-sref-active="active-challenge" class="text-light-black w-500"><i class="fa fa-th-list"></i> Leaderboard</a></li>
</ul>
</div>
</div>
</div>
</section>
<ui-view></ui-view>
</div>
</div>
</div>
<landing-footer></landing-footer>
As per the script writtin in the footer it should add data-theme = 'dark' in html . i do it in the main landing page . but it is not working in other pages .
Related
I have multiple sections in which I want to sort the DIVs if contains <span> text in it otherwise. I tried different stackoverflow threads but nothing helps for me so far, I am little near to my target but my code doesn't work I am not sure what I am doing wrong in it, these inner divs needs to be sorted inside each section. but I am not good at JS.
If div contains the span text it bring it to first in each section.
sortUsingNestedText($('#toSort'), "div.customCardData", "span.recenUpdate");
function sortUsingNestedText(parent, childSelector, keySelector) {
var items = parent.children(childSelector).sort(function(a, b) {
var vA = $(keySelector, a).text();
var vB = $(keySelector, b).text();
return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
});
parent.append(items);
console.log("done");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row mbr-justify-content-center" id="toSort">
<div class="col-lg-12 text-center sectionTitle">
<h2>Section Title 01</h2>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item A</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item B</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item C</h3>
<div class="ribbon"><span class="recenUpdate">Updated Today</span></div>
</div>
</a>
</div>
</div>
<div class="row mbr-justify-content-center" id="toSort">
<div class="col-lg-12 text-center sectionTitle">
<h2>Section Title 02</h2>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item X</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item Y</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item Z</h3>
<div class="ribbon"><span class="recenUpdate">Updated Today</span></div>
</div>
</a>
</div>
</div>
Here is my jsFiddle
Firstly note that you have created multiple elements with the same id of toSort. This is invalid as id must be unique within the DOM. If you want to group elements by common behaviour use classes instead.
I want to bring the span ones one first in each section
In this case you don't need sort. Just append() the relevant div to the start of their group:
$('.toSort').each(function() {
var $h2 = $(this).find('h2');
$(this).find('.customCardData:has(span.recenUpdate)').insertAfter($h2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row mbr-justify-content-center toSort">
<div class="col-lg-12 text-center sectionTitle">
<h2>Section Title 01</h2>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item A</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item B</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item C</h3>
<div class="ribbon"><span class="recenUpdate">Updated Today</span></div>
</div>
</a>
</div>
</div>
<div class="row mbr-justify-content-center toSort">
<div class="col-lg-12 text-center sectionTitle">
<h2>Section Title 02</h2>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item X</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item Y</h3>
</div>
</a>
</div>
<div class="col-lg-4 mbr-col-md-12 customCardData">
<a href="#">
<div class="wrap">
<h3>Item Z</h3>
<div class="ribbon"><span class="recenUpdate">Updated Today</span></div>
</div>
</a>
</div>
</div>
I'm using bootstrap to position some cards one near another but i'm not really able to do it because it always places the cards one under another.
<div class="container">
<div class="row">
<div class="col-8">
<div class="col-sm-2">
<div class='card' style='width:20rem;'>
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL"
alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="card" style='width:20rem;'>
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL"
alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-4 offset-1">
</div>
</div>
</div>
Basically i need those 2 cards to be on the same row and one after another but i don't understand what's wrong.Are those cards too big?
The problem is your inline style definition for your cards: width: 20rem. Essentially, you're giving the card 2/12 of the grid to work with (col-sm-2) and then giving a hard definition of the card to have a width of 20rem, which forces the next card to take up the next line.
Also, you need to specify another row after your col-8 declaration. Here's my code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-sm-6">
<div class='card'>
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL" alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL" alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 offset-1">
</div>
</div>
</div>
I have product that I want to display in every four cols of materialize. How can I achieve that task using ng-repeat?
Content of main.html:
<div class="row">
<div class="col s12 m4">
<div class="card blue-grey darken-1" ng-repeat="laptop in data">
<div class="card-content white-text">
<span class="card-title">{{laptop.name}}</span>
</div>
<div class="card-action">
{{laptop.Brand}}
</div>
</div>
</div>
</div>
Just put the ng-repeat on the col instead of the row..
<div class="row">
<div class="col s12 m4" ng-repeat="laptop in data">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">{{laptop.name}}</span>
</div>
<div class="card-action">
{{laptop.Brand}}
</div>
</div>
</div>
</div>
Example: http://www.codeply.com/go/3rRmpU0NC3
I'm trying to create a tile layout with bootstrap. Here is the website that I would like to try to copy: link
I kind of achieved this by using columns but using margins and paddings will break them. Aforementioned website uses some kind of script to automatically set their position value (e.g., position:absolute;top:0;left:248px). How is this done?
Here is what I have: jsfiddle
<div class="col-lg-4">
<div class="row">
<div class="col-lg-12 metro-1">
<img src="https://placehold.it/600x600/313236/000000" style="width:100%;">
<div class="top-text-block">
<div class="top-text-block-inner">
check out our<br>hottest winit
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 metro-2">
<div class="row upper-metro">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<img src="https://placehold.it/300x300/ffffff/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<img src="https://placehold.it/300x300/23AE8F/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
<div class="row lower-metro">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 lower-metro-inner">
<img src="https://placehold.it/600x300/DEDCE1/000000" style="width:100%;">
<div class="center-text-block">
some text goes here
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 metro-3">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-12">
<img src="https://placehold.it/300x300/5B2988/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-12">
<img src="https://placehold.it/300x300/C64001/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 right-metro">
<img src="https://placehold.it/300x600/017B39/000000" style="width:100%;">
<div class="center-text-block">
some text goes here
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 metro-4">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-12">
<img src="https://placehold.it/300x300/5535B1/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-12">
<img src="https://placehold.it/300x300/7EC0BF/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-12">
<img src="https://placehold.it/300x300/E4A706/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-12">
<img src="https://placehold.it/300x300/925D63/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
</div>
</div>
</div>
It was called Mansory layout. I didn't know what it was called but now I got it. Funny how things are so easy when you actually know what to search for. Haha!
I have the following html in my Angular app:
<div class="row">
<div ng-repeat="Type in Types">
<div class="col s12 m6 l3">
<div class="class1" ng-click="Method1(Type.Id, Type.Desc)">
<div class="white-text">
<img id="img_{{Type.Id}}" ng-src="./Images/{{Type.Desc}}" alt="{{Type.Desc}}" />
<h3>{{Type.Desc}}</h3>
</div>
</div>
</div>
</div>
</div>
The above does its job displaying all the items in Types
Now I want to display a textbox and a button whenever there are no elements in Types. What would be the best way to do this?
You can try this:
<div class="row">
<div ng-if=" Types == null || Types.length == 0">
<!-- Your textbox / input button here-->
</div>
<div ng-repeat="Type in Types">
<div class="col s12 m6 l3">
<div class="class1" ng-click="Method1(Type.Id, Type.Desc)">
<div class="white-text">
<img id="img_{{Type.Id}}" ng-src="./Images/{{Type.Desc}}" alt="{{Type.Desc}}" />
<h3>{{Type.Desc}}</h3>
</div>
</div>
</div>
</div>
</div>
<div class="row" ng-show="Types">
<div ng-repeat="Type in Types">
<div class="col s12 m6 l3">
<div class="class1" ng-click="Method1(Type.Id, Type.Desc)">
<div class="white-text">
<img id="img_{{Type.Id}}" ng-src="./Images/{{Type.Desc}}" alt="{{Type.Desc}}" />
<h3>{{Type.Desc}}</h3>
</div>
</div>
</div>
</div>
</div>
<div ng-show="!Types">Button and Textbox go here</div>
or
<div ng-show="Types == null"> Button and textbox go here</div>