I'm sure there's a really simple solution to this but I can't seem to find it, and I haven't found the question asked here already.
I'm trying to align a layout widget (area) so that when another widget is added it appears to the right of the first widget and not below.
I was hoping i could sort this with flexbox and the artistContainer class but it doesn't seem to be possible.
Dev tools and desired outcome
home.html
<section class="bodysect--dark" id="artists">
<h2 class="body__heading">Artists</h2>
<div class="artistContainer">
{{
apos.area(data.page, 'artist', {
widgets: {
artist: {}
}
})
}}
</div>
</section>
Widget.html
<div class="artist">
<div class="artistImage">
{{ apos.singleton(data.widget, 'areaImage', 'apostrophe-images', {
widgets: {
'apostrophe-images': {}
}
}) }}
</div>
<div class="artistName">
{{ apos.singleton(data.widget, 'singletonName', 'apostrophe-rich-text', {
widgets: {
'apostrophe-rich-text': {}
}
}) }}
</div>
<div class="artistBio">
{{ apos.singleton(data.widget, 'singletonBio', 'apostrophe-rich-text', {
widgets: {
'apostrophe-rich-text': {}
}
}) }}
</div>
</div>
widget index.js
module.exports = {
extend: 'apostrophe-widgets',
label: 'Artist',
contextualOnly: true,
addFields: [
{
name: 'artistImage',
type: 'singleton',
label: 'Image Area',
required: true
},
{
name: 'artistName',
type: 'singleton',
label: 'Name Area',
required: true
},
{
name: 'artistBio',
type: 'singleton',
label: 'Bio Area',
required: true
},
]
};
Thanks in advance!
There is nothing preventing you from lining up horizontally, however, to maintain the proper flex contexts, you'll need to apply styles to apostrophe-generated markup instead of just your project level classes. Here is some sample code I just demo'd
.horizontal-area {
.apos-area-widgets, // proper context for logged-in user
.apos-area { // proper context for logged-out user
display: flex;
}
.apos-area-widget-wrapper {
flex-grow: 1;
flex-basis: 0;
}
}
http://g.recordit.co/IlOPYKRUo0.gif
You might want to provide additional UI changes to adjust the horizontal Add Content line within the horizontal area scope.
Related
I am using buefy autocomplete input fields in my nuxtjs project, this is location search box, what i want is just for mobile device, when i click the input field, it should overlay on full screen with suggestion like i attached screenshot below and after select suggestion, it should close and return to normal.
here is my simple auto complete input field code.
<template>
<b-autocomplete
v-model="pickupairport"
:data="airports"
name="pickupairport"
class="ttc-search-input"
icon="map-marker-outline"
placeholder="Pickup Airport"
field="name"
:loading="isFetching"
#typing="getairports"
#select="(option) => (aptselected = option)"
>
<template slot-scope="props">
<div class="media">
<div class="media-content">
{{ props.option.name }}
<br />
<small> {{ props.option.cityName }}, {{ props.option.countryName }} </small>
</div>
</div>
</template>
</b-autocomplete>
</template>
<script>
import { debounce } from 'lodash'
export default {
data() {
return {
pickupairport: '',
airports: [],
aptselected: null,
isaptFetching: false,
}
},
methods: {
getairports: debounce(function (pickupairport) {
const aptsearchq = this.pickupairport
if (!pickupairport.length) {
this.airports = []
return
}
this.isaptFetching = true
fetch(`https://api.myurl.com/api/transfers/aplist?querystring=${aptsearchq}`)
.then((response) => {
return response.json()
})
.then((data) => {
this.airports = []
data.response.forEach((item) => this.airports.push(item))
})
.catch((error) => {
this.airports = []
throw error
})
.finally(() => {
this.isaptFetching = false
})
}, 500),
},
}
</script>
What I want to achieve is like this GIF - https://i.imgur.com/zOYPwBI.gif
What I have now is like this GIF - https://imgur.com/9ZBZzxa
i tried to find something related, but couldn't find, if any suggestion on how to achieve that, it would be helpful for me.
Hello is there a way to set a custom width in my react select button?
I would like it if I can use bootstrap to do that so it can be responsive but if not its okay.
Here is my code:
import Select, { components } from 'react-select';
export default class AccomodationType extends Component {
render() {
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
]
return(
<div>
<Select
options= {options}
isClearable
isSearchable
name="color"
/>
</div>
)
}
}
I just used bootstrap sizing for it!
Here is what I added:
<Select
className="w-25 p-3"
options= {options}
isClearable
isSearchable
name="color"
/>
I'm trying to build a vue.js front-end and the design is calling for 100% width tiles with a dynamic background image that will be passed along the rest of the content to the page. I already have the payload passing to the component that renders each tile, but I need to render the background image for each of the tiles. I also need to mention that the images are actually 3 images for each tile that need to render for each of our 3 breakpoints. So far I was able to pass one image by using :style="'background-image: url(' + backgroundImage + ')'" but this only serves one image per tile. My question is, what would be the best way to pass all 3 images per tile and render them correctly?
I have heard online that I should just use srcset and pass all 3 to an <img> tag, and make that image the background by using CSS, but that just seems unorthodox.
Is there a more elegant way to deal with responsive background images in reusable components in vue.js?
Home Page
<template>
<div class="Home">
<HomePageTile v-for="tile in tiles" :key="tile.title" :tile-title="tile.title" :tile-desc="tile.description" :tile-type="tile.position" :background-image="tile.backgroundImage"/>
</div>
</template>
<script>
import HomePageTile from '#/components/HomePageTile'
import tileImage1 from '#/assets/optimized/image1.jpg'
import tileImage2 from '#/assets/optimized/image2.jpg'
import tileImage3 from '#/assets/optimized/image3.jpg'
import tileImage4 from '#/assets/optimized/image4.jpg'
export default {
name: 'Home',
components: {
HomePageTile: HomePageTile
},
data () {
return {
tiles: [
{
title: 'Title 1',
description: 'Content 1',
position: 'right',
backgroundImage: tileImage1
}, {
title: 'Title 2',
description: 'Content 2',
position: 'right',
backgroundImage: tileImage2
}, {
title: 'Title 3',
description: 'Content 3',
position: 'right',
backgroundImage: tileImage3
}, {
title: 'Title 4',
description: 'Content 4',
position: 'right',
backgroundImage: tileImage4
}
]
}
}
}
</script>
Tile Component
<template>
<div :class="tilePosition(tileType)" :style="'background-image: url(' + backgroundImage + ')'">
<template v-if="tileType">
<div class="home-page-tile--container home-page-tile--container__with-desc">
<h2 class="home-page-tile--container--title">{{ tileTitle }}</h2>
<p class="home-page-tile--container--description">{{ tileDesc }}</p>
</div>
<div class="home-page-tile--call-to-action" v-if="callToAction">
<p class="home-page-tile--call-to-action--text">{{ callToAction.text }}</p>
<Button class="home-page-tile--call-to-action--button" :button-route="callToAction.buttonPath" :button-text="callToAction.buttonText" :button-style="callToAction.buttonStyle" />
</div>
</template>
<template v-else>
<div class="home-page-tile--container">
<h2 class="home-page-tile--container--title">{{ tileTitle }}</h2>
<Button :button-route="buttonPath" :button-text="buttonText" button-style="pill"/>
</div>
</template>
</div>
</template>
<script>
import Button from './Button'
export default {
name: 'HomePageTile',
props: {
tileType: String,
tileTitle: String,
tileDesc: String,
backgroundImage: String,
buttonText: String,
buttonPath: String,
callToAction: Object
},
components: {
Button: Button
},
data () {
return {
tilePosition: function (el) {
if (el) {
return 'home-page-tile home-page-tile__' + el
} else {
return 'home-page-tile'
}
}
}
}
}
</script>
I have a master-detail scenario. I'm using paper-datatable by David Mulder for my user-list. Data is populated through firebase collection
When tapping a row, a paper-dialog pops up with the details of the selected user.
When trying to edit a field, updating at firebase stops after one keystroke.
What am I missing?
<dom-module id="user-list">
<template>
<style>
:host {
#apply(--layout-vertical);
}
#editDialog {
min-width: 500px;
}
</style>
<firebase-collection location="https://<FIREBASE_APP>.firebaseio.com/users" data="{{users}}"></firebase-collection>
<paper-dialog id="editDialog" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop>
<div>
<paper-input value="{{selectedUser.name}}" label="Name" class="flex"></paper-input>
<paper-input value="{{selectedUser.username}}" label="Username" class="flex"></paper-input>
</div>
<div class="buttons">
<paper-button dialog-confirm autofocus>Ok</paper-button>
</div>
</paper-dialog>
<paper-datatable id="datatable" selected-item="{{selectedUser}}" selectable on-row-tap="_onDetail" data="{{users}}">
<div no-results>
Loading or no more items...
</div>
<paper-datatable-column header="Name" property="name" type="String" sortable style="min-width: 160px"></paper-datatable-column>
<paper-datatable-column header="Username" property="username" type="String" sortable style="min-width: 40px"></paper-datatable-column>
</paper-datatable>
</template>
<script>
Polymer({
is: 'user-list',
behaviors: [
Polymer.NeonAnimatableBehavior
],
properties: {
type: String,
selectedUser: {
type: Object,
notify: true
},
users: {
type: Array,
notify: true
},
animationConfig: {
value: function() {
return {
'entry': {
name: 'fade-in-animation',
node: this
},
'exit': {
name: 'fade-out-animation',
node: this
}
}
}
}
},
_onDetail: function() {
var dialog = document.getElementById('editDialog');
if (dialog) {
dialog.open();
}
}
})
</script>
</dom-module>
It seems firebase-collection isn't currently meant to be used in this way, it's more of a view into a Firebase location with data that's in an array-like structure. Although with the exception that you can add/delete new items but not update existing ones. See https://elements.polymer-project.org/elements/firebase-element?active=firebase-collection.
That said, each item in the collection has a __firebaseKey__ property that you could use to directly update that item in firebase.
I am trying to create a first ToDo-App for my own.
I want to use ionic, because we will need it later at work (so I can make some experiences).
Now - I have my app with simple to-do tasks, which is a list of checkboxes, implemented as
<ion-checkbox ng-repeat="task in activeProject.tasks"
ng-model="task.checked"
ng-change="toggleItemDisplay(task)">
{{ task.title }}
</ion-checkbox>
I can write something into the console with this "toggleItemDisplay"-Function, which is implemented in the controller
//Toggle the text-display on checkbox
$scope.toggleItemDisplay = function(task) {
if(task.checked == true) {
console.log(task.title);
} else {
console.log('not checked!');
}
}
I would like the text which is displayed next to the checkbox (-> it's the task.title) to get the style "text-decoration: line-through" when the checkbox is checked.
How can I add the style-Attribut? It must be so simple but I just can't find the right solution..
Thanks in advance.
Just add ng-class for a conditional CSS class
angular.module('example', ['ionic'])
.controller('c', ['$scope', function($scope) {
// Mock of your tasks
$scope.tasks = [
{ title : "test 1", checked : false },
{ title : "test 2", checked : true },
];
$scope.toggleItemDisplay = function(task) {
if(task.checked == true) {
console.log(task.title);
} else {
console.log('not checked!');
}
}
}]);
.task-done {
text-decoration: line-through;
}
<script src="http://code.ionicframework.com/1.0.0-beta.13/js/angular/angular.min.js "></script>
<script src="http://code.ionicframework.com/1.0.0-beta.13/js/ionic.js"></script>
<script src="http://code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.js"></script>
<div ng-app="example">
<div ng-controller="c">
<ion-checkbox ng-repeat="task in tasks"
ng-model="task.checked"
ng-change="toggleItemDisplay(task)"
ng-class="{'task-done': task.checked}">
{{ task.title }}
</ion-checkbox>
</div>
</div>