<div class="col-6 col-md-4 col-lg-3 mb-4 mb-sm-5">
<div class="col-12 h-100 c-bg-offwhite p-0">
<div class="row">
<div class="col-12 text-center">
<img class="w-100" src="{{ url('/storage/photo_images/'.$image) }}" alt="">
</div>
<div class="col-12 text-left">
<p class="p color-black d-block px-4 pt-4 pb-3 mt-0 mb-0">{{$photo->title}}</h3>
</div>
#guest
<div class="col-12">
<div class="px-4 pb-4">
<a href="/contact">
<button class="w-100 btn-primary">Get a quote</button>
</a>
</div>
</div>
#endguest
</div>
</div>
#auth
<div class="col-12 p-0 mt-3">
<a href="/photos/{{$photo->slug}}/edit">
<button class="w-100 btn-primary">Edit</button>
</a>
</div>
#endauth
</div>
The code is a photo, with a title and a button for customers to click to contact the company. When an end-user is logged in it turns into an edit button, but sits underneath so not to confuse it with the customer facing button. It should be a case of one button on, one button off.
auth
guest
I'm so sorry for not really understanding your question.
But based on you question and the screenshot you provides it's already do what it shoud do.
#guest will be showing a button with 'Get A Quote' written on it and links to /contact
and #auth will be showing edit button when a user is logged in.
Related
I have a hard time testing our hybrid app with Robotframework tests using appium library. The application has 2 contexts:
Native (android)
Web (Angular)
The problem that I Have is when I'm in the web context and I'm trying to use XPath locators to locate elements that contain some text using the expression: Click Element //*[contains(#text,some_containing_text)] I would have the result of the root element which contains the element that I'm trying to locate. So in the end my test is clicking all the wrong way then it should be clicking because of that locator returning the root element of the HTML page.
This functionality of locating elements by just saying "Click element that contains something like this" is working with the selenium library on our Web application. But my question is why (or what I'm doing wrong) it doesn't work with appium Robotframework library.
Using appium 1.6.3.
I'm searching for span with the text Ukončit
<app-attendance-detail class="ng-star-inserted">
<div class="py-4">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="mb-4">
<div class="row">
<div class="col-12"><h4 class="fs-14 mb-1 font-weight-bold">úterý, 09:56:00 26.07.2022</h4>
</div>
</div>
<h4 class="fs-14 fs-md-16 mb-4 font-weight-bold text-gray-light ng-star-inserted">
<span>Začátek dnešní směny od</span> dnes v 9:45 </h4>
<div class="e-timer text-gray ng-star-inserted">00:10h</div>
<a href="#" title="#" preventdefault=""
class="btn btn-primary w-100 text-uppercase font-weight-bold px-9 mt-6 ng-star-inserted"><i
class="icon icon-stop position-relative bottom-1 mr-1"></i><span translate=""
ng-reflect-translate="">Ukončit</span></a>
<div class="row row-xs mt-2 ng-star-inserted">
<div class="col-6 px-1"><a href="#" title="#" preventdefault=""
class="btn btn-white border-primary-dark text-primary w-100 text-uppercase font-weight-bold px-9"><i
class="icon icon-pause position-relative bottom-1 mr-1"></i><span>Začátek<br>přestávky</span></a>
</div>
<div class="col-6 px-1"><a href="#" title="#" preventdefault=""
class="btn btn-white border-primary-dark text-primary w-100 text-uppercase font-weight-bold px-9"><span>Odchod<br>jiné</span></a>
</div>
</div>
</div>
<div class="mt-4"><h4 translate="" class="fs-14 fs-md-16 mb-2 font-weight-bold"
ng-reflect-translate="">Docházka</h4><a title="#" target="_blank"
class="d-block bg-white px-3 border-radius-sm box-shadow-sm mb-2 text-gray ng-star-inserted"
href="https://h5tws.cezdata.corp:44320/sap/bc/bsp/sap/zjd_dovol/overview.htm">
<div class="row">
<div class="col py-3 pb-3">
<div translate="" class="fs-16 font-weight-bold text-uppercase" ng-reflect-translate="">
Žádost o dovolenou
</div>
</div>
<div
class="col col-xs py-2 text-center border-left border-gray-light d-flex align-items-center justify-content-center">
<div class="text-gray"><i class="icon icon-forward"></i></div>
</div>
</div>
</a><a title="#" target="_blank"
class="d-block bg-white px-3 border-radius-sm box-shadow-sm mb-2 text-gray ng-star-inserted"
href="https://h5tws.cezdata.corp:44320/sap/bc/bsp/sap/zjd_doli/selection_screen.htm">
<div class="row">
<div class="col py-3 pb-3">
<div translate="" class="fs-16 font-weight-bold text-uppercase" ng-reflect-translate="">
Docházkový list
</div>
</div>
<div
class="col col-xs py-2 text-center border-left border-gray-light d-flex align-items-center justify-content-center">
<div class="text-gray"><i class="icon icon-forward"></i></div>
</div>
</div>
</a></div>
<div class="mt-4"><h4 translate="" class="fs-14 fs-md-16 mb-2 font-weight-bold"
ng-reflect-translate="">Záznamy</h4><a routinglink="attendance/records"
href="#" title="#"
class="d-block bg-white px-3 border-radius-sm box-shadow-sm mb-2 text-gray"
ng-reflect-routing-link="attendance/records">
<div class="row">
<div class="col py-3 pb-3">
<div translate="" class="fs-16 font-weight-bold text-uppercase" ng-reflect-translate="">
Přehled záznamů
</div>
</div>
<div
class="col col-xs py-2 text-center border-left border-gray-light d-flex align-items-center justify-content-center">
<div class="text-gray"><i class="icon icon-forward"></i></div>
</div>
</div>
</a></div>
</div>
</div>
</div>
<app-modal-dialog styleclass="shadow" ng-reflect-style-class="shadow" ng-reflect-show-header="false"
ng-reflect-dismissable-mask="false" ng-reflect-dialog-id="4">
<p-dialog class="p-element ng-tns-c30-7 ng-star-inserted" ng-reflect-style-class="shadow"
ng-reflect-visible="false" ng-reflect-modal="true" ng-reflect-dismissable-mask="false"
ng-reflect-transition-options="0ms" ng-reflect-show-header="false" ng-reflect-draggable="true"
ng-reflect-resizable="true" ng-reflect-close-on-escape="true" ng-reflect-base-z-index="1050">
</p-dialog>
</app-modal-dialog>
<app-modal-dialog styleclass="shadow" ng-reflect-style-class="shadow" ng-reflect-show-header="false"
ng-reflect-dialog-id="5" ng-reflect-dismissable-mask="false">
<p-dialog class="p-element ng-tns-c30-8 ng-star-inserted" ng-reflect-style-class="shadow"
ng-reflect-visible="false" ng-reflect-modal="true" ng-reflect-dismissable-mask="false"
ng-reflect-transition-options="0ms" ng-reflect-show-header="false" ng-reflect-draggable="true"
ng-reflect-resizable="true" ng-reflect-close-on-escape="true" ng-reflect-base-z-index="1050">
</p-dialog>
</app-modal-dialog>
</div>
This is the keyword in Robot testcase
Attendance_action
[Arguments] ${action}
Click element //*[contains(#text, "${action}")]
Sleep 2s
Thanks for updating the question to include the details of how the XPath is called. It seems to me that you will end up with an expression like //*[contains(#text, "Ukončit")]; I would not expect that to return anything because the expression #text is a refererence to an attribute with the name text. It's not a reference to the textual content of an element.
I suspect what you actually meant to enter was an expression like this:
//*[text()[contains(., "Ukončit")]]
Translation: any element which contains a text node which itself contains the string "Ukončit". That should return a single span element:
<span translate="" ng-reflect-translate="">Ukončit</span>
I have 4 livewire components, rendered in dashboard as:
#livewire('profits.stats')
#livewire('costs.stats')
#livewire('leads.stats')
#livewire('sales.stats')
However, when page loads they run one after another instead of asyncronously. I put a sleep(3) to test, and each starts after the previous ones 3 second delay. How to get them to all start same time?
toggleShowData below has the sleep method, and sets showData=true. I saw this in a tutorial for now to have a loading for individual components
I don't think its relevant, but here is my template:
<div wire:init="toggleShowData">
<div wire:loading.delay class="align-items-center">
<div class="flex items-center justify-center ">
<div class="w-40 h-40 border-t-4 border-b-4 border-brand-500 rounded-full animate-spin"></div>
</div>
</div>
<div class="flex-auto p-4 bg-brand-300 rounded" wire:loading.remove>
<div class="flex flex-wrap">
<div class="relative w-full pr-4 max-w-full flex-grow flex-1">
<h5 class="text-gray-100 uppercase font-bold text-xs"> Costs</h5>
<span class="font-semibold text-xl text-gray-300">$34,100</span>
</div>
<div class="relative w-auto pl-4 flex-initial">
<div
class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 shadow-lg rounded-full bg-red-500">
<i class="fas fa-chart-bar"></i>
</div>
</div>
</div>
<p class="text-sm text-gray-100 mt-4">
<span class="text-emerald-500 mr-2"><i class="fas fa-arrow-up"></i> 2,99% </span>
<span class="whitespace-nowrap"> Since last month </span></p>
</div>
</div>
The first render of the livewire page happens inside the PHP process in the backend.
Blade sees that you are requesting a livewire component and replaces this with the result of your parse() method from your component.
This indeed happens in sync, once the page is rendered the components can render itself async
I am doing a small project with vue.js and laravel. I have a list of products, when I click on a specific product on "Quick view" button I want to show all data about that product in a modal but the data is not showing in the modal.
Can you help me please. Here is my code:
#extends('app')
#section('content')
<div id ="crud" class="row">
<div class="col-xs-12">
<h1 class="page-header">Lista de Articulo</h1>
</div>
<div class="wrap-icon right-section col-md-12" data-toggle="modal" data-target="#list" >
<div class="wrap-icon-section wishlist">
<a href="#" class="link-direction">
<i class="fa fa-heart" aria-hidden="true"></i>
<div class="left-info">
<span class="index">0 item</span>
<br>
<span class="title">Wishlist</span>
</div>
</a>
</div>
</div>
<div class="row">
<div v-for="keep in keeps" class="col-md-4" style="width:25%;" #mouseover="showByIndex = keep" #mouseout="showByIndex = null">
<div class="container">
<img :src="keep.foto" style="width:100%; max-width:150px;">
<button class="btn" v-show="showByIndex === keep" v-on:click.prevent="showKeep(keep)">Quick view</button>
</div>
<h3>
<b> #{{keep.nombre}}</b>
</h3>
<p> #{{keep.descripcion}}</p>
I fixed it. The error was because I called the modal file outside the div. Thanks to everybody.
you can't send data directly from vue in blade structure, you need to write a component for that.
https://v3.vuejs.org/examples/modal.html#modal-component
The dropdown is not showing, I won’t mind any assistance on what I’m doing wrong.
<div class=“boxOptions”>
<div data-toggle=“dropdown” arial-haspopup=“true” arial-expanded=“false”>
<i class=“fas fa-ellipsis-v”></i>
</div>
<div class=“dropdown-menu”>
<a class=“dropdown-item” href=“#”>Activate</a>
<a class=“dropdown-item” href=“#”>Delete</a>
</div>
</div>
Make it like this.
<div class="boxOptions dropdown">
<div data-toggle="dropdown">
<i class='fas fa-ellipsis-v'></i>
</div>
<div class='dropdown-menu'>
<a class='dropdown-item' href='#'>Activate</a>
<a class='dropdown-item' href='#'>Delete</a>
</div>
</div>
Try this one
I am trying to image and its relevant data in bootstrap. For that I am writing code like below
<div class="col-xs-12 col-sm-3 col-sm-push-9">
<p style="padding:20px;"></p>
<h3 align=center>Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail" src="img/uthappizza.png" alt="Uthappiza">
</a>
<div class="media-body">
<h2 class="media-heading">Uthappizza</h2>
<p>A unique combination of Indian Uthappam (pancake) and
Italian pizza, topped with Cerignola olives, ripe vine
cherry tomatoes, Vidalia onion, Guntur chillies and
Buffalo Paneer.</p>
<p><a class="btn btn-primary btn-xs" href="#">More »</a></p>
</div>
</div>
</div>
</div>
I am getting output like this:
enter image description here
I want it to be side by side I don't know where I am going wrong.
Add pull-left to your image as a class. Bootply.