I am trying to make a catalog for online shop like ebay. How to make each box with different image and title. Am I supposed to use JS here and if so how to do it?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
background-color: #E7E7E7;
font-family: system-ui;
color: #000;
}
.container {
display: grid;
grid-template-columns: 20rem 1fr;
margin: 2.6rem;
}
.box {
border-radius: 3%;
background-color: #fff;
box-shadow: 10px 10px 20px#bababa;
width: 15rem;
height: 17.5rem;
}
.image {
position: relative;
top: 10px;
background-color: #fff;
background-image: url(Reference/Shoes/Air\ Jordan\ 1\ Retro\ High\ OG\ Shoes.webp);
background-repeat: no-repeat;
background-size: cover;
padding: 100px;
margin: 0 10px;
}
.title {
margin: 20px 20px 0 20px;
}
.creator {
color: #525252;
font-size: 9.5pt;
margin: 0 20px 20px 20px;
}
<div class="container">
<div class="box">
<div class="image"></div>
<div class="title">
<p>Nike Air Max Jordan 1</p>
</div>
<div class="creator">
<p>Martingrgv</p>
</div>
<div class="price"></div>
</div>
<div class="box">
<div class="image"></div>
<div class="title">
<p>Nike Air Max Jordan 1</p>
</div>
<div class="creator">
<p>Martingrgv</p>
</div>
<div class="price"></div>
</div>
</div>
Result:
I am new to building a website so you might see beginner mistakes.
If you have any suggestions to improve the code I am open.
Do you mean this - you can ajax the object from your server:
const items = [
{ image: "nike1.jpg", title:"Nike Air Max Jordan 1",price:150, creator:"Martingrgv"},
{ image: "nike2.jpg", title:"Nike Air Max Jordan 2",price:160, creator:"Martingrgv"}
]
document.getElementById("container").innerHTML = items.map(item =>
`<div class="box">
<div class="image"><img src="${item.image}" /></div>
<div class="title">
<p>${item.title}</p>
</div>
<div class="creator">
<p>${item.creator}</p>
</div>
<div class="price">$${item.price}</div>
</div>`)
.join("");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
background-color: #E7E7E7;
font-family: system-ui;
color: #000;
}
#container {
display: grid;
grid-template-columns: 20rem 1fr;
margin: 2.6rem;
}
.box {
border-radius: 3%;
background-color: #fff;
box-shadow: 10px 10px 20px#bababa;
width: 15rem;
height: 17.5rem;
}
.image {
position: relative;
top: 10px;
background-color: #fff;
padding: 100px;
margin: 0 10px;
}
.title {
margin: 20px 20px 0 20px;
}
.creator {
color: #525252;
font-size: 9.5pt;
margin: 0 20px 20px 20px;
}
<div id="container"></div>
Related
How can I add icons before the form fields?
This is how looks now:
And here how I want:
Here is css code (front.css):
body .qb-form {
width: auto;
height: auto;
}
#media (max-width: 660px) {
body .qb-form {
width: 100%;
}
}
body .qb-form h2 {
background: #3482C3;
padding: 15px 25px;
margin-bottom: 0;
color: white;
margin-top: 0;
}
body .qb-form .moreinfo {
background: #3482C3;
color: white;
padding: 0 25px 15px 25px;
margin-bottom: 15px;
}
body .qb-form label {
text-align: left;
font-size: 14px;
display: block;
padding-bottom: 0;
}
body .qb-form .qb-gdpr-label {
padding-bottom: 0;
}
body .qb-form .quickbuy_input {
height: 31px;
width: 190px;
border: 1px solid #ABADB3;
padding: 5px;
}
body .qb-form textarea {
width: 100%;
height: 60px;
border: 1px solid #abadb3;
}
body .qb-form .crow {
padding: 0 25px 25px 25px;
}
body .qb-form .buttons_wrp {
padding: 10px 25px 25px 25px;
}
body .qb-form .buttons_wrp .button {
padding: 10px 20px;
border: none;
border-radius: 4px;
text-transform: uppercase;
color: white;
background: #3482C3;
overflow: hidden;
}
body .qb-form .buttons_wrp .qb-btn-submit {
padding: 10px 20px 10px 62px;
background: #3482C3 url('../img/cart-icon.png') no-repeat 15px center;
}
body .qb-form .buttons_wrp .button:hover {
background-color: #388bd1;
}
body .qb-wrp .qb-btn span {
border-bottom: 1px dashed;
}
.product-simple .qb-btn {
background: none;
color: #1F679B;
font-size: 13px;
border-bottom: 1px dashed #1F679B;
padding: 0 0 1px 0;
}
body .qb-form sup {
color: red;
font-weight: bold;
}
body .qb-form .quickbuy_errors,
body .qb-form .quickbuy_success {
margin: 0 15px;
display: none;
padding: 10px;
line-height: 1.5;
}
body .qb-form .qb-product-name {
padding: 5px;
border: 1px dashed white;
font-weight: bold;
display: inline-block;
}
body .qb-form body .qb-form_loader {
position: relative;
top: -3px;
}
body .qb-form .qb-loader {
visibility: hidden;
}
body .qb-form .qb-loader.visible {
visibility: visible;
}
.qb-form .qb-gdpr-label .qb_gdpr_wrp {
float: left;
position: relative;
top: 3px;
margin-right: 10px;
}
.qb-form .qb-btn-close {
display: none;
}
.qb-form .qb-btn-close span {
font-size: 2rem;
line-height: 0;
display: inline-block;
vertical-align: middle;
margin-right: 0.5rem;
position: relative;
top: -1px;
border: none;
}
.qb-gdpr-label p:last-child {
margin-bottom: 0;
}
#media (max-width: 767px) {
.qb-wrap,
#product .qb-wrap {
flex-wrap: wrap;
}
}
And here is the hook.tpl:
<div class="crow">
<label for="quickbuy_name">{l s='Your name' mod='quickbuy'}:</label>
<input type="text" class="qb_name qb-input-field form-control" id="quickbuy_name" name="qb_customer_name" value="{$qb_name|escape:'html':'UTF-8'}" />
</div>
<div class="crow">
<label for="quickbuy_address">{l s='Your address' mod='quickbuy'}:</label>
<input type="text" class="qb_address qb-input-field form-control" id="quickbuy_address" name="qb_address" value="{$qb_address|escape:'html':'UTF-8'}" />
</div>
<div class="crow">
<label for="quickbuy_phone">{l s='Your phone number' mod='quickbuy'}: <sup>*</sup></label>
<input type="text" class="qb_phone qb-input-field form-control" id="quickbuy_phone" name="qb_phone" value="{$qb_phone|escape:'html':'UTF-8'}" />
</div>
{if $qb_gdpr}
<div class="crow">
<label class="qb-gdpr-label">
<span class="qb_gdpr_wrp">
<input type="checkbox" class="qb_gdpr" name="qb_gdpr">
</span>
{if $qb_gdpr_text}
{$qb_gdpr_text nofilter}{* HTML *}
{else}
{l s='I agree to processing of my personal data' mod='quickbuy'}
{if $qb_gdpr_link}(<a target="_blank" href="{$qb_gdpr_link|escape:'html':'UTF-8'}">{l s='read' mod='quickbuy'}</a>){/if}
{/if}
</label>
</div>
{/if}
<div class="crow quickbuy_errors error"></div>
<div class="crow quickbuy_success success"></div>
<div class="buttons_wrp">
<input type="hidden" name="qb_id_product" value="{$qb_product->id|intval}" />
<input type="hidden" name="qb_id_product_attribute" value="{$qb_product->id_product_attribute|intval}" />
<input type="hidden" name="qb_token" value="{$qb_token|escape:'html':'UTF-8'}" />
<input type="hidden" name="qb_action" value="submitQB" />
<input type="submit" class="qb-btn-submit btn btn-default button button-small" value="{l s='Buy' mod='quickbuy'}" />
<button class="qb-btn-close btn btn-default button button-small"><span>×</span> {l s='Close' mod='quickbuy'}</button>
<img class="qb-loader" src="/img/loader.gif" alt="{l s='Loading...' mod='quickbuy'}" />
</div>
</div>
</div>
</div>
I will be happy if anyone can help.
Thank you in advance.
Best regards
You can select the input fields from your HTML template by using their id's.
You you use icons8 to find the correct icons.
There you can get the Link (CDN) for each item by clicking on the download button and copy HTML.
You can paste the copied code in your HTML (just before the respective input field).
Afterwards you can style the respective item in your CSS file.
So that it has the same border and height as your input field.
Hello I'm attempting to to have two arrows pointing at a specific (x, y) point or in the general area of a button.
I would like two arrows coming from each of the boxs pointing in the general area of the button. I can do this fine with regular css on certain screens but when the screen is resized or smaller then the arrows no longer point to the button. I'm just trying to figure out a good way to handle this.
So really what I'm asking is what would be good way to go about having two arrows appended after 2 divs pointing at the same point. (The Red Square)
JSFIDDLE:
https://jsfiddle.net/kxw7jquu/
HTML
<div class='app-info-panel'>
<div class='app-info-panel-header'>
<h1>Data-sources</h1>
</div>
<div class='data-source-panel-wrapper' id='source_report'>
<h1>Report_File</h1>
<div class='data-source-panel'>
<div class='data-source-info'>
<h3>Report Id</h3>
<h2>1</h2>
</div>
<div class='data-source-info'>
<h3>Report Name</h3>
<h2>Medicine-stock</h2>
</div>
<div class='data-source-info'>
<h3>Date</h3>
<h2>02/16/18</h2>
</div>
<div class='data-source-info'>
<h3>Reporter</h3>
<h2>John Smith</h2>
</div>
</div>
<div class='source-arrow' style="transform: rotate(50deg); top: -10px">
➝
</div>
</div>
<div class='data-source-panel-wrapper' id='source_order'>
<h1>Order_movement</h1>
<div class='data-source-panel'>
<div class='data-source-info'>
<h2>ID: 1</h2>
</div>
<div class='data-source-info'>
<h2>Medicine-stock</h2>
</div>
<div class='data-source-info'>
<h2>02/16/18</h2>
</div>
<div class='data-source-info'>
<h2>John Smith</h2>
</div>
</div>
<div class='source-arrow' style="transform: rotate(130deg); bottom: -40px; left: 60px">
➝
</div>
</div>
<div>
<button class='data-source-button'>Order Filling</button>
</div>
</div>
CSS
.app-info-panel {
border-radius: 4px;
height: 30rem;
box-sizing: border-box;
padding: 20px;
position: relative;
width: 100%;
h1 {
font-size: 1.5rem;
font-weight: 500;
}
}
.data-source-panel-wrapper {
position: absolute;
user-select: none;
.source-arrow {
position: absolute;
left: calc(50% - 50px);
bottom: 20px;
font-size: 12.5rem;
color: #D6D7D8;
transform-origin: left;
z-index: 1;
}
h1 {
font-size: 1.4rem;
color: #0481E2;
text-align: center;
}
}
.data-source-panel {
position: relative;
display: flex;
box-sizing: border-box;
padding: 1rem;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
z-index: 2;
.data-source-info {
h3 {
color: #0481E2;
margin-top: 0;
margin-bottom: 3px;
font-size: .8rem;
line-height: normal;
}
h2 {
margin: 0;
font-size: 16px;
font-weight: 400;
line-height: normal;
}
}
}
#source_report {
.data-source-panel {
.data-source-info {
margin-right: 18px;
}
}
}
#source_order {
right: 60px;
.data-source-panel {
flex-direction: column;
.data-source-info {
margin: 5px 0;
}
}
}
.data-source-button {
display: block;
width: 220px;
height: 68px;
font-size: 1.25rem;
margin: 18.75rem auto 0;
color: white;
background-color: #FF9700;
}
I'm not really a math enthusiast, i managed to find a formula on the internet to do what you wanted.
Source Pen Instead of following the mouse i made it so it follows the button
PS: I removed the the html on the right for the sake of this explanation.
i know it's not a complete answer, but you can adjust it from here.
window.onresize = pointing;
function pointing() {
let point = document.querySelector('.data-source-button');
let rad = Math.atan2(point.offsetLeft, point.offsetTop);
let left = (rad * (20 / Math.PI) * -5) + 60;
document.querySelector('.leftArrow').style.transform = "rotate(" + left + "deg)"
}
pointing();
.app-info-panel {
border-radius: 4px;
height: 30rem;
box-sizing: border-box;
padding: 20px;
position: relative;
width: 100%;
}
.app-info-panel h1 {
font-size: 1.5rem;
font-weight: 500;
}
.data-source-panel-wrapper {
position: absolute;
user-select: none;
}
.data-source-panel-wrapper .source-arrow {
position: absolute;
left: calc(50% - 50px);
bottom: 20px;
font-size: 12.5rem;
color: #D6D7D8;
transform-origin: left;
z-index: 1;
}
.data-source-panel-wrapper h1 {
font-size: 1.4rem;
color: #0481E2;
text-align: center;
}
.data-source-panel {
position: relative;
display: flex;
box-sizing: border-box;
padding: 1rem;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
z-index: 2;
}
.data-source-panel .data-source-info h3 {
color: #0481E2;
margin-top: 0;
margin-bottom: 3px;
font-size: .8rem;
line-height: normal;
}
.data-source-panel .data-source-info h2 {
margin: 0;
font-size: 16px;
font-weight: 400;
line-height: normal;
}
#source_report .data-source-panel .data-source-info {
margin-right: 18px;
}
.data-source-button {
display: block;
width: 220px;
height: 68px;
font-size: 1.25rem;
margin: 18.75rem auto 0;
color: white;
background-color: #FF9700;
}
<div class='app-info-panel'>
<div class='app-info-panel-header'>
<h1>Data-sources</h1>
</div>
<div class='data-source-panel-wrapper' id='source_report'>
<h1>Report_File</h1>
<div class='data-source-panel'>
<div class='data-source-info'>
<h3>Report Id</h3>
<h2>1</h2>
</div>
<div class='data-source-info'>
<h3>Report Name</h3>
<h2>Medicine-stock</h2>
</div>
<div class='data-source-info'>
<h3>Date</h3>
<h2>02/16/18</h2>
</div>
<div class='data-source-info'>
<h3>Reporter</h3>
<h2>John Smith</h2>
</div>
</div>
<div class='source-arrow leftArrow' style=" top: -10px">
➝
</div>
</div>
<div>
<button class='data-source-button'>Order Filling</button>
</div>
</div>
JSFiddle
I nested 3 columns in the row div to align them horizontally and the social media icons will not be part of the row. I put width: 100%, float: left, and tried different ways to make the 3 columns lined up straight - no success.
This graphic below is the goal I need to succeed.
HTML and CSS
p {
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
}
h3 {
font-family: 'Source Sans Pro', sans-serif;
font-size: 27px;
}
.box {
background-color: #f3f3f3;
color: #fff;
font-size: 150%;
width: 100%;
}
.box .box {
background-color: #f3f3f3;
color: #444;
}
.placeholder {
grid-column: col 3 / span 2;
grid-row: row 2;
display: grid;
}
.sm-stw {
grid-column: 1;
grid-row: 1;
width: 573px;
}
.stw-box {
border: solid 1px #ff0000;
width: 75%;
margin: 0 auto;
padding: 0 auto;
}
div.vertical-line {
width: 1px;
background-color: #979797;
height: 100%;
float: left;
margin: 0 15px 0 15px;
}
.sm-svrs {
grid-column: 2;
grid-row: 1;
text-align: left;
}
.sm-hashtag-stw {
grid-column: 1/3;
grid-row: 2;
text-align: center;
}
<div class="box placeholder">
<div class="box sm-stw">
<div class="stw-box">
<div class="col">
<div class="sm-icon"><img src="imgs/icon-fb.png" alt="Seek the World | Facebook"></div>
<div class="sm-logo"><img src="imgs/icon-ins.png" alt="Seek the World | Instagram"></div>
</div>
<div class="col">
<div class="vertical-line" style="height: 75px;"></div>
</div>
<div class="col">
<h3>Seek the World</h3>
<p>(short content place here)</p>
</div>
</div>
</div>
</div>
I clean a little your css code, and i replace the grid with flex. Also there a lot of stuff that i think were useless, so i removed them.
As #hungerstar said in comment, you can set a border to one of the col, and add a little padding to make the vertical line.
It is better this way because it does not pollute the html.
Check the code, and tell me I you need more explanation !
$('#removeGrayMargin').on('click', function(){
if(!$(this).hasClass('active')) {
$(this).text('Put back gray margins');
$(this).addClass('active');
$('.main-container').addClass('with-margin');
}else {
$(this).text('Remove the gray margin');
$(this).removeClass('active');
$('.main-container').removeClass('with-margin');
}
});
.main-container {
background-color: #f3f3f3;
color: #444;
font-size: 150%;
width: 100%;
}
.box {
display: flex;
align-items: center;
justify-content: center;
border: solid 1px #ff0000;
width: 75%;
margin: 0 auto;
padding: 30px 0;
}
.main-container.with-margin {
background: transparent;
}
.main-container.with-margin .box{
background: #f3f3f3;
}
.col-1 {
width: 30%;
text-align: right;
padding-right: 20px;
}
.col-2 {
width: 70%;
border-left: 1px solid #8C8C8C;
padding-left: 20px;
}
.col-2-title,
.col-2-p {
font-family: 'Source Sans Pro', sans-serif;
}
.col-2-p {
font-size: 14px;
margin-top: 0;
}
.col-2-title{
font-size: 27px;
margin-top: 5px;
margin-bottom: 20px;
}
.sm-logo + .sm-logo{
margin-top: 8px;
}
img {
/* Trick to remove the white space under the image */
vertical-align: middle;
}
button {
border-radius: 0;
background: #262626;
color: white;
border: 0;
padding: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-container">
<div class="box">
<div class="col-1">
<div class="sm-logo"><img src="http://www.sorensonvrs.com/assets/images/svrsv2/logo-facebook.png" alt="Seek the World | Facebook" width="25px"></div>
<div class="sm-logo"><img src="http://www.sorensonvrs.com/assets/images/svrsv2/logo-instagram.png" alt="Seek the World | Instagram" width="25px"></div>
</div>
<div class="col-2">
<h3 class="col-2-title">Seek the World</h3>
<p class="col-2-p">(short content place here)</p>
</div>
</div>
</div>
<p>
Bonus because i don't know if you want exactly your image, or if you want the gray margin as your js fiddle.
</p>
<button id="removeGrayMargin">Remove the gray margin</button>
I am making a selection panel and I am having a hard time figuring out an aspect to it. There are nine boxes and I want the user to be able to click the boxes and when clicked for the hover's format to stay present and then ideally some sort of checkmark or something added into the border of the box. I am completely unsure of how to get the boxes' hover font effect to stay when I take the mouse off.
Does anyone know how I can do this?
#project-scope-container {
margin-top: 70px;
margin-left: 9%;
width: 75%;
height: 300px;
}
#project-scope-title {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 15px;
}
.project-option-boxes {
display: inline-block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 12px 20px 12px 0px;
width: 30%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
}
.project-option-boxes:hover {
background-color: #45ba95;
color: #FFF;
}
<div id="project-scope-container">
<div id="project-scope-title">PROJECT SCOPE</div>
<div class="project-option-boxes">BRANDING & IDENTITY</div>
<div class="project-option-boxes">WEB DESIGN</div>
<div class="project-option-boxes">RESPONSIVE/MOBILE</div>
<div class="project-option-boxes">MARKETING ASSETS</div>
<div class="project-option-boxes">HTML5 ANIMATION</div>
<div class="project-option-boxes">SEO OPTIMIZATION</div>
<div class="project-option-boxes">MONTHLY SUPPORT</div>
<div class="project-option-boxes">WEB DEVELOPMENT</div>
<div class="project-option-boxes">ECOMMERCE</div>
</div>
Create another class name that hold the same css style when hovering, and add those class into clicked element or use toggleClass like following example :
$('.project-option-boxes').click(function() {
$(this).hide().toggleClass('box_focused').fadeIn('slow');
});
#project-scope-container {
margin-top: 70px;
margin-left: 9%;
width: 75%;
height: 300px;
}
#project-scope-title {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 15px;
}
.project-option-boxes {
display: inline-block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 12px 20px 12px 0px;
width: 30%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
}
.project-option-boxes:hover {
background-color: #45ba95;
color: #FFF;
}
.box_focused {
background-color: #45ba95;
background-image : url("http://findicons.com/files/icons/2232/wireframe_mono/48/checkbox_checked.png");
background-position: right top;
background-repeat: no-repeat;
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="project-scope-container">
<div id="project-scope-title">PROJECT SCOPE</div>
<div class="project-option-boxes">BRANDING & IDENTITY</div>
<div class="project-option-boxes">WEB DESIGN</div>
<div class="project-option-boxes">RESPONSIVE/MOBILE</div>
<div class="project-option-boxes">MARKETING ASSETS</div>
<div class="project-option-boxes">HTML5 ANIMATION</div>
<div class="project-option-boxes">SEO OPTIMIZATION</div>
<div class="project-option-boxes">MONTHLY SUPPORT</div>
<div class="project-option-boxes">WEB DEVELOPMENT</div>
<div class="project-option-boxes">ECOMMERCE</div>
</div>
You can use the following example by using JQuery and using .hover and .addClass():
$(".project-option-boxes").hover(function()
{
$(this).addClass("active");
});
#project-scope-container {
margin-top: 70px;
margin-left: 9%;
width: 75%;
height: 300px;
}
#project-scope-title {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 15px;
}
.project-option-boxes {
display: inline-block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 12px 20px 12px 0px;
width: 30%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
}
.project-option-boxes:hover {
background-color: #45ba95;
color: #FFF;
}
.active {
background: #45ba95;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="project-scope-container">
<div id="project-scope-title">PROJECT SCOPE</div>
<div class="project-option-boxes">BRANDING & IDENTITY</div>
<div class="project-option-boxes">WEB DESIGN</div>
<div class="project-option-boxes">RESPONSIVE/MOBILE</div>
<div class="project-option-boxes">MARKETING ASSETS</div>
<div class="project-option-boxes">HTML5 ANIMATION</div>
<div class="project-option-boxes">SEO OPTIMIZATION</div>
<div class="project-option-boxes">MONTHLY SUPPORT</div>
<div class="project-option-boxes">WEB DEVELOPMENT</div>
<div class="project-option-boxes">ECOMMERCE</div>
</div>
You can create a class with the same style as the hover, and when one box is clicked, you can add this class to the box.
.project-option-boxes.active {
background-color: #45ba95;
color: #FFF;
}
and to give the class to the boxes,
$(document).on('click', 'project-option-boxes', function (e) {
$(this).toggleClass('active');
}
I'm building a site with angular. In the main page and search results page has a recipes feed like a pinterest and I use the jQuery isotope plugin and angular-isotope directives, but I have 2 issues/problems.
In the main page a the grid cells do not have a fixed width, I use the min-width css property.
This is my CSS:
.recipe {
width: $grid-width;
min-height: 325px;
height: auto;
margin: $margin-top 0 $margin-bottom $ditter;
float: left;
position: relative;
border: 1px solid #C3C3C3;
#include border-radius(0 0 5px 5px);
.avatar {
position: absolute;
top: -15px;
width: $grid-width;
margin: 0 auto;
img {
display: block;
margin: 0 auto;
}
}
.image {
width: $grid-width - 2px;
margin: 0 auto;
overflow-x: hidden;
img {
width: $grid-width;
margin: 0 auto;
}
}
.name {
font-family: Times;
font-size: 20px;
font-style: italic;
font-weight: bold;
text-align: center;
}
.recipe-controls {
width: $grid-width;
.star {
font-size: 30px;
margin: 15px;
}
}
}
This is my angular template:
<div id="masonry" class="clearfix" isotope-container>
<div isotope-item>
...
</div>
<div class="controls" isotope-item>
...
</div>
<div class="recipe" ng-repeat="recipe in recipes" isotope-item>
<div class="avatar text-center">
<a href="">
<img class="img-circle" ng-src="http://graph.facebook.com/bruno.egermano/picture?type=normal" alt="">
</a>
</div>
<div class="image">
<a href="" ng-click="openRecipe(recipe.id)">
<img ng-src="{{recipe.image}}" alt="{{recipe.name}}">
</a>
</div>
<div class="name">
{{recipe.name}}
</div>
<div class="recipe-controls">
<i class="glyphicon pull-right star" ng-class="{'glyphicon-star-empty': !recipe.star.stared, 'glyphicon-star': recipe.star.stared}">
{{recipe.star.count}}
</i>
</div>
</div>
And that is my screenshoot, the circles is the problems I got.
In this first problem. What am I doing wrong?
The second problem, in the search result page, I have a filters, when the users change one of theirs, I call a ajax request and reload the collection.
When its occurs the isotope put all the items on one another, like that:
The SCSS is the same and the HTML is much similar like the other problem.
I found my mistake in the first problem.
I forgot to set the height of my image and the container.
Now, my SCSS looks like that:
.recipe {
width: $grid-width;
height: auto;
margin: $margin-top 0 $margin-bottom $ditter;
float: left;
position: relative;
border: 1px solid #C3C3C3;
#include border-radius(0 0 5px 5px);
.avatar {
position: absolute;
top: -15px;
width: $grid-width;
margin: 0 auto;
img {
display: block;
margin: 0 auto;
}
}
.image {
width: $grid-width - 2px;
height: 235px;
margin: 0 auto;
overflow-x: hidden;
img {
width: $grid-width;
margin: 0 auto;
}
}
.name {
font-family: Times;
font-size: 20px;
font-style: italic;
font-weight: bold;
text-align: center;
}
.recipe-controls {
width: $grid-width;
.star {
font-size: 30px;
margin: 15px;
}
}
}
But the second problem is still happening.