create a sticker label with 3x8 size with CSS - css

I am having trouble with CSS creating 24 identical information on 3x8 (70x37mm) size.
I can adjust the size and margin to make everything fit inside the box but im having no luck on creating 3x8 (70x37mm) size box.
if I just set the width: 70mm; and height: 37mm ; everything gets on top of each other...
My data inside the 70x37mm-box is below:
let labellist = [];
for (let i = 1; i <= 24; i++) {
<div className="label-main" key={i}>
<p className="item_name">{item_name}</p>
<p className="Check_Date">Tillv:{Check_Date}</p>
<strong>
<i className="Batch_number">
batch# {Batch_number}
</i>
</strong>
<div className="row no-gutters ">
<div className="col-8 ">
<p className="Expire_Info"> {Expire_Info}</p>
<p className="prodcution">
<p>{type}</p>
<p>{address 1} </p>
<p>{address 2}</p>
<p> {email} </p>
<p className="OBS">{OBS}</p>
</p>
</div>
<div className="col-4">
{
<QRCode
value={Content}
renderas="svg"
style={{
width: "80px",
height: "80px",
}}
/>
}
</div>
</div>
</div>
}
return labellist;
return (
<div>
<div className="container">{renderLable()}</div>
</div>
)

Related

How to create Bootstrap rows in a React component?

I have a Hit const which displays products (from Algolia). I use it in my main component. I would like to display the products in a row, however, I don't know how to do that, since if I write the row class around the const (in the main component) it doesn't work.
The Hit const is in a way mapping multiple products and I can't create a row from it, because placing row around Hit in the main component treats it as if it were one item and placing row inside of Hit treats each product as one row.
How could each product from Hit be displayed as a column inside a row?
This is the Hit const:
const Hit = ({ hit }) => (
<div className="col-6 col-sm-4 col-md-3">
<a className="mb-5 d-block font-color-black cursor-pointer">
<div
className="mb-3"
style={{
paddingBottom: "125%",
background: `url("${hit.image}") center center/cover`,
}}
></div>
<p className="font-size-subheader mb-2 font-weight-medium">
{hit.product}
</p>
<p className="font-size-subheader font-weight-medium pb-2 borderbottom border-color-black">
{hit.cena} <span className="hit-em">€</span>{" "}
</p>
</a>
</div>
);
This is the return of the main component, where Hit is used:
return (
<InstantSearch
searchClient={searchClient}
indexName="Besedilo"
searchState={props.searchState}
createURL={props.createURL}
onSearchStateChange={props.onSearchStateChange}
>
<div className="py-5 my-5">
<div className="py-4">
{/* Main Content */}
<div className="custom-container">
<div className="row">
<div className="col-12 col-lg-10 offset-lg-2">
<div className="collection">
<div className="row mb-5 collection-1">
<Hits hitComponent={Hit} /> //this is how Hit is used
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</InstantSearch>
);

how to copy color in clipboard , reactjs

I am beginner in reactjs, I want to copy a color when I click on color.
How should it be done?
import React from 'react';
const Green = ()=>{
return (
<div>
<h1 className='g-color-title'>Green Color</h1>
<div className='container-fluid'>
<div className='div-style' id='color31'> #2ECC72 </div>
<div className='div-style' id='color32'> #26AE60 </div>
<div className='div-style' id='color33'> #6AB04A </div>
<div className='div-style' id='color34'> #43BE31 </div>
<div className='div-style' id='color35'> #10A881 </div>
<div className='div-style' id='color36'> #019031 </div>
<div className='div-style' id='color37'> #75DA8B </div>
<div className='div-style' id='color38'> #218F76 </div>
<div className='div-style' id='color39'> #218F76 </div>
<div className='div-style' id='color40'> #7CEC9F </div>
</div>
</div>
)
}
export default Green;
You can use navigator.clipboard.writeText() to copy text to the clipboard.
I would recommend using an object of colors, then with Object.entries() and map() create the <div>s and add an onClick() to trigger it:
const Green = () => {
const colors = {
color31: '#2ECC72',
color32: '#26AE60',
color33: '#6AB04A',
color34: '#43BE31',
color35: '#10A881',
color36: '#019031',
color37: '#75DA8B',
color38: '#218F76',
color39: '#218F76',
color40: '#7CEC9F',
};
return (
<div>
<h1 className='g-color-title'>Green Color</h1>
<div className='container-fluid'>
{Object.entries(colors).map(([id, color]) =>
<div className='div-style' id={id} onClick={navigator.clipboard.writeText(color)}>{color}</div>
)}
</div>
</div>
);
}
export default Green;

Set css style on click and remove them on click

I want to set style when I click on div. I done this, It's work. But I want when its clicked and when I click to set the default style.
$('#tray-button').click(function() {
$('.buttons-content').css('bottom', '160px');
});
<div class="buttons-content">
<div id="tray-button" class="button">
<div class="white"></div>
<div class="black"></div>
<i class="fas fa-grip-horizontal"></i>
</div>
<div class="button">
<div class="white"></div>
<div class="black"></div>
<i class="fas fa-share-alt"></i>
</div>
<div class="button play-pause play">
<div class="white"></div>
<div class="black"></div>
<i class="far fa-1-1x fa-play-circle"></i>
</div>
<div class="button rotate">
<div class="white"></div>
<div class="black"></div>
<i class="fas fa-expand-alt"></i>
</div>
</div>
buttons-content - default bottom: 40;
When click on #tray-button -> bottom: 160px;
When click again on #tray-button -> bottom: 40px; (default)
Define a specific CSS rule e.g.
.buttons-content.toggled {
bottom: 160px;
}
with a .toggled class and on click toggle that class
$('#tray-button').click(function() {
$('.buttons-content').toggleClass('toggled');
});
When the class is removed the style of the element will be automatically reset to the previous state. Furthermore your script is more mantainable because the style is not hardcoded within.
this script just remembers the last state and does whatever you want.
$( document ).ready(function() {
var stack = 0
$("#tray-button").click(function()
{
if (stack === 0){
}
$('.buttons-content').css('bottom', '160px');
stack = 1;
}else{
$('.buttons-content').css('bottom', '40px');
stack = 0;
}
});

React - How to expand an element and hide others, on click

I'm new to react and fairly new to programming in general.
I'm using react and want a box to expand on click while the 3 other boxes hide simultaneously. Right now I've just gotten it to add a class of 'hidee' (named that way because 'hide' is actually a feature) on click and send an alert.
Wanting the expanded area to be almost full window size as it will house content.. and then would add a nav bar to the top of that. Below is the concept and my current code is in a sandbox below that.
Here's my code so far for this component and corresponding css and html. Code Sandbox
import React, { Component } from 'react';
// onclick= (this.expand)
//outside of render:
// expand =(e) => {
// e.target (targets the one they clicked on)
// hide every other element of the class add a class to e.target to increase width and height
// add div to top with nav
// }
class AdminPanel extends Component {
constructor(){
super();
}
expand = (event) => {
event.preventDefault();
var elements = document.querySelectorAll('.title');
debugger;
for (var i=0; i<elements.length; i++){
elements[i].classList.add('hidee');
//hide everything except the one we clicked on
//if event.target != elements[i] then add a class of hidee
//add a class to event.target called expand
//make a css file and put in hidee and expand classes and put the css in
//import that css file at the top of this file
}
alert('hi');
}
render(){
return (
<div class="box">
<div class="container">
<div class="row">
<div className="col-sm-6 ">
<a href="#"/>
<div class="box-part text-center">
<div class="title" onClick={this.expand}>
<img class="card-img-top" src="https://visualpharm.com/assets/224/Folder-595b40b85ba036ed117dd27b.svg" alt=" image"/>
</div>
<div className="text">
<span><h2>Thought Archives</h2></span>
</div>
</div>
</div>
<div className="col-sm-6 ">
<a href="#"/>
<div class="box-part text-center">
<div class="title" onClick={this.expand}>
<img class="card-img-top" src="https://visualpharm.com/assets/168/Read%20Message-595b40b75ba036ed117d88f5.svg" alt=" image"/>
</div>
<div className="text">
<span><h2>Incoming Requests</h2></span>
</div>
</div>
</div>
<div className="col-sm-6 ">
<a href="#"/>
<div class="box-part text-center">
<div class="title" onClick={this.expand}>
<img class="card-img-top" src="https://visualpharm.com/assets/375/Create-595b40b75ba036ed117d7bbf.svg" alt=" image"/>
</div>
<div className="text">
<span><h2>Create New</h2></span>
</div>
</div>
</div>
<div className="col-sm-6 ">
<a href="#"/>
<div class="box-part text-center">
<div class="title" onClick={this.expand}>
<img class="card-img-top" src="https://static.thenounproject.com/png/5040-200.png" alt=" image"/>
</div>
<div className="text">
<span><h2>Your Community</h2></span>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default AdminPanel;
/* css for AdminPanel.js*/
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400,600,700');
body{
background: #f2f2f2;
font-family: 'Josefin Sans', sans-serif;
}
h3{
font-family: 'Josefin Sans', sans-serif;
}
.box{
padding:60px 0px;
}
.card-img-top {
height: 100px;
width: 30%;
}
.box-part{
background:#FFF;
border-radius:10px;
padding:60px 10px;
margin:30px 0px;
}
.box-part:hover{
background:#4183D7;
}
.box-part:hover .fa ,
.box-part:hover .title ,
.box-part:hover .text ,
.box-part:hover a{
color:#FFF;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
.text{
margin:20px 0px;
}
.fa{
color:#4183D7;
}
/* end css for adminPanel.js*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
Update the state of the component in the expand function using setState, When the state changes to true, the render method gets the new state.
constructor(){
super();
this.expand = this.expand.bind(this);
this.state = {
hide: !this.state.hide
};
}
expand = (event) => {
event.preventDefault();
this.setState({
hide: true
});
alert('hi');
}
{ this.state.hide ?
<div className="col-sm-6 ">
<a href="#"/>
<div class="box-part text-center">
<div class="title" onClick={this.expand}>
<img class="card-img-top" src="https://visualpharm.com/assets/168/Read%20Message-595b40b75ba036ed117d88f5.svg" alt=" image"/>
</div>
<div className="text">
<span><h2>Incoming Requests</h2></span>
</div>
</div>
</div>
: null }
if I were your, I'd definitely split the div's with the class of title into a separate component and have an initial data with everything each div needs.
If you make that, then you just have to loop through your source of data and render the elements your them to be rendered. As a result, you can show/hide the navbar.
I've created a sandbox in which you can see how to control the state of your component and render whatever you want accordingly.
Assume that each div is called card
Hope that could help!
You can do it easily as below :
class AdminPanel extends React.Component {
state = {
//Create sections obj in state to maintain your section's class
sections : {
thoughtArchives: {
key: 1,
class: 'hidee',
//add extra data if you want for further use
},
incomingRequests: {
key: 2,
class: 'hidee'
},
createNew: {
key: 3,
class: 'hidee'
},
yourCommunity: {
key: 4,
class: 'hidee'
}
}
}
constructor(props) {
super(props);
}
expand = (sectionKey) => {
//get the prevState
this.setState(prevState => {
//if key matches with section to expand add expand class or add hidee class
for (let k in prevState.sections) {
prevState.sections[k].class = prevState.sections[k].key === sectionKey ? 'expand' : 'hidee'
}
//return sections to update state
return prevState
})
}
render() {
let {sections} = this.state;
return (<div className="box">
<div className="container">
<div className="row">
<div className="col-sm-6 ">
<a href="#"/>
<div className="box-part text-center">
{/* Append expand/hidee class & attach onCLick listener and pass key of section to expand function*/}
<div className={"title " + sections.thoughtArchives.class} onClick={this.expand.bind(this, sections.thoughtArchives.key)}>
<img className="card-img-top" src="https://visualpharm.com/assets/224/Folder-595b40b85ba036ed117dd27b.svg" alt=" image"/>
</div>
<div className="text">
<span>
<h2>Thought Archives</h2>
</span>
</div>
</div>
</div>
<div className="col-sm-6 ">
<a href="#"/>
<div className="box-part text-center">
<div className={"title " + sections.incomingRequests.class} onClick={this.expand.bind(this, sections.incomingRequests.key)}>
<img className="card-img-top" src="https://visualpharm.com/assets/168/Read%20Message-595b40b75ba036ed117d88f5.svg" alt=" image"/>
</div>
<div className="text">
<span>
<h2>Incoming Requests</h2>
</span>
</div>
</div>
</div>
<div className="col-sm-6 ">
<a href="#"/>
<div className="box-part text-center">
<div className={"title " + sections.createNew.class} onClick={this.expand.bind(this, sections.createNew.key)}>
<img className="card-img-top" src="https://visualpharm.com/assets/375/Create-595b40b75ba036ed117d7bbf.svg" alt=" image"/>
</div>
<div className="text">
<span>
<h2>Create New</h2>
</span>
</div>
</div>
</div>
<div className="col-sm-6 ">
<a href="#"/>
<div className="box-part text-center">
<div className={"title " + sections.yourCommunity.class} onClick={this.expand.bind(this, sections.yourCommunity.key)}>
<img className="card-img-top" src="https://static.thenounproject.com/png/5040-200.png" alt=" image"/>
</div>
<div className="text">
<span>
<h2>Your Community</h2>
</span>
</div>
</div>
</div>
</div>
</div>
</div>)
}
}
export default AdminPanel;

Bulma's navbar-buger doesnt connect to menu items in Vue.js 2

I am trying to implement a navbar for my application whose front end is built using Vue 2.0 and Bulma . It works well on desktops and but on smaller screens its showing the burger icon but it is not showing any elements. Its just present.
<template>
<div class="container is-fluid">
<div>
<nav class="navbar is-dark">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<img alt="K R O N O S" height="100px">
</a>
<div class="button navbar-burger" data-target="navMenu">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="navbar-menu" id="navMenu">
<div class="navbar-end">
<div class="navbar-item">
<a class="" href="#"> Docs </a>
</div>
<div class="navbar-item ">
<a class="" href="#"> Report </a>
</div>
<div class="navbar-item">
<a class="">More</a>
</div>
<div class="navbar-item">
<a class="">Logout</a>
</div>
</div>
</div>
</nav>
</div>
</div>
</template>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Get all "navbar-burger" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0)
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function ($el) {
$el.addEventListener('click', function () {
// Get the target from the "data-target" attribute
var target = $el.dataset.target
var $target = document.getElementById(target)
// Toggle the class on both the "navbar-burger" and the "navbar-menu"
$el.classList.toggle('is-active')
$target.classList.toggle('is-active')
})
})
}
})
export default {
name: 'Navbar',
data () {
return {
msg: ''
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div{
border: 0px solid black;
}
</style>
As you can see I have tried implementing the example code in on which was present here but with no use. Shouldnt Bulma give me responsive navbar out of the box. All the examples and solutions I have found are for the older "nav" class not the newer "navbar". Help would be much appreciated.
So, after a bit of studying the Vue guide and clues from fatman's comments, this is the fix I applied.
The above code works , but this is a more vue-ish way to do the navbar-burger menu.
<template>
<nav class="navbar">
<div class="container">
<div class="navbar-brand is-large">
<a class="navbar-item" href="#">
<img alt="K R O N O S" height="100px">
</a>
<button #click="makeBurger" class="button navbar-burger" data-target="navMenu" v-bind:class="{ 'is-active': activator }">
<span></span>
<span></span>
<span></span>
</button>
</div>
<div class="navbar-menu" id="navMenu" v-bind:class="{ 'is-active': activator }">
<div class="navbar-end">
<div class="navbar-item">
<a class="" href="#"> Docs </a>
</div>
<div class="navbar-item ">
<a class="" href="#"> Report </a>
</div>
<div class="navbar-item">
<a class="">More</a>
</div>
<div class="navbar-item">
<a class="">Logout</a>
</div>
</div>
</div>
</div>
</nav>
</template>
<script>
export default {
name: 'Navbar',
data () {
return {
msg: '',
activator: false
}
},
methods: {
makeBurger () {
this.activator = !this.activator
return this.activator
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div{
border: 0px solid black;
}
</style>
Hope this helps someone. The show/hide functionality is taken care by Bulma.
This works, but
will not close the menu
will cause router-links not to work
For 1.) I recommend adding #click to navbar-item as well:
<a #click="makeBurger" class="navbar-item">
<router-link to="/login">
{{link1}}
</router-link>
</a>

Resources