Skip to content

Commit

Permalink
Merge pull request #212 from dallefeste/minor-design-update
Browse files Browse the repository at this point in the history 
added some style features
  • Loading branch information
@dulvui
dulvui authored Jan 31, 2024
2 parents b25a7bf + f3073be commit bfb7c96
Show file tree
Hide file tree
Showing 4 changed files with 96 additions and 20 deletions.
26 changes: 22 additions & 4 deletions frontend/src/components/wc-filtered.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ SPDX-License-Identifier: AGPL-3.0-or-later
<div class="container container-extended p-4">
<h1 class="components-title d-flex flex-column" style="min-width: 40%">
<span v-if="noFilters">all components</span>
<span v-else>components found</span>
<span v-else>components found </span>
<span style="font-size: small">
{{ currentPage.totalElements }} components
{{ currentPage.totalElements }} components {{ getFilteringString }}
<!-- <nuxt-link
:to="
localePath({
Expand All @@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
<div
v-for="entry in currentPage.content"
:key="entry.uuid"
class="col-md-6 col-lg-6 col-xl-4 mb-4"
class="col-md-6 col-lg-6 col-xl-4 mb-4" style="position: relative; z-index: 1;"
>
<WebcomponentEntryCard :entry="entry" :return-to="returnTo" uuKey="filtered" />
</div>
Expand Down Expand Up @@ -90,8 +90,26 @@ export default Vue.extend({
},
fetch() {},
computed: {
getFilteringString(){
let filteringStr = '';
if(this.term && this.term !== ''){
filteringStr += '"'+this.term+'"';
}
if(this.tags && this.tags.length !== 0 && this.tags[0] !== 'any'){
if(filteringStr !== ''){
filteringStr += ', ';
}
filteringStr += this.tags.join(', ')
}

if(filteringStr == ''){
return ''
}else{
return 'filtered by '+filteringStr
}
},
noFilters(){
if ((!this.term || this.term == '') && (!this.tags || this.tags.length == 0) && (!this.sorting && !this.sorting.condition && !this.sorting.order) ){
if ((!this.term || this.term == '') && (!this.tags || this.tags.length == 0) && (!this.sorting || (this.sorting.condition == null && this.sorting.order == null)) ){
return true;
}
return false;
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/webcomponent-entry-card.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -401,7 +401,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
z-index: 2;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(46,49,49,1) 95%);
background: linear-gradient(180deg, rgba(0,0,0,0) 10%, rgba(46,49,49,1) 95%);
overflow: hidden;
border-radius: 0.4rem;
}
Expand Down
2 changes: 0 additions & 2 deletions frontend/src/pages/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,6 @@ export default {
},
mounted(){
let cookieValue = VueCookie.get('isHeaderExpanded');
console.log("mounted",cookieValue)
if(cookieValue && cookieValue == 'true'){
this.isHeaderExpanded = true;
}else{
Expand Down Expand Up @@ -193,7 +192,6 @@ export default {
if(ev.sorting && ev.sorting.condition !== null && ev.sorting.order !== null){
sortingCondition = ev.sorting.condition+"|"+ev.sorting.order;
}
console.log("sortingCondition",ev.sorting,sortingCondition)


let query = {}
Expand Down
86 changes: 73 additions & 13 deletions frontend/src/pages/webcomponent/_id/_version/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<div style="min-height: 1000px">
<div v-if="component && config" class="pb-5">
<div class="bg-light" style="display: flex; flex-direction: column">
<div class="container-fluid container-extended pb-0 pt-3 pt-sm-5 pl-4 pr-4">
<div class="container-fluid container-extended pb-0 pt-3 pt-sm-5 pl-4 pr-4" id="chooseRightSidebarTab">

<div class="row">
<div class="col-lg-8 d-flex justify-content-between flex-column flex-sm-row w-100 pl-0">
Expand Down Expand Up @@ -104,7 +104,7 @@
</b-card-text>
</b-card>
</div>
<div id="chooseRightSidebarTab" class="config-tabs col-lg-4 pt-3 pt-lg-0 detail-content-right">
<div class="config-tabs col-lg-4 pt-3 pt-lg-0 detail-content-right">
<div v-if="!collapsedRightSidebar" >

<div v-show="tabIndex == 1" title="SHARE">
Expand All @@ -114,7 +114,7 @@
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="col-lg-12 details-share-row" :class="{'active': showPopover}">
<b-card class="code-container white">
<b-card-text>
<prism-editor v-model="getDetailsLink" class="my-editor" :highlight="highlighter" style="border: 0; background-color: inherit"/>
Expand All @@ -124,7 +124,7 @@
Copy details link
</div>
</div>
<div class="col-lg-12 pt-3">
<div class="col-lg-12 details-share-row" :class="{'active': showFullscreenPopover}" id="chooseRightSidebarTabEmbed">
<b-card class="code-container white">
<b-card-text>
<prism-editor v-model="getFullscreenLink" class="my-editor" :highlight="highlighter" style="border: 0; background-color: inherit"/>
Expand Down Expand Up @@ -155,12 +155,12 @@
Copied to clipboard
</b-popover>

<div class="row" id="chooseRightSidebarTabEmbed">
<div class="row">
<div class="col-lg-12 pt-5">
<h4>EMBED</h4>
</div>
</div>
<div>
<div class="details-share-row" :class="{'active': (showEmbedPopover || animateEmbedRow)}">
<!-- <div class="text-uppercase font-weight-bold mb-2">
copy code
</div> -->
Expand Down Expand Up @@ -297,6 +297,7 @@
showPopover: false,
showFullscreenPopover: false,
showEmbedPopover: false,
animateEmbedRow: false,
intervalId: 0,
};
},
Expand Down Expand Up @@ -490,6 +491,7 @@

if(this.$route.hash == '#chooseRightSidebarTabEmbed'){
this.handleScroll(1)
this.animateSnippedBox()
}
},

Expand All @@ -504,11 +506,9 @@
}
const anchor = document.getElementById(`chooseRightSidebarTabEmbed`)
setTimeout(()=>{
console.log("anchor anchor",anchor,loops)
if (anchor) {
console.log("dadasdasdassaaa asdas asd asd as",window.pageYOffset)
window.scrollTo({
top: anchor.getBoundingClientRect().top + window.pageYOffset -50
top: anchor.getBoundingClientRect().top + window.pageYOffset
})
}else{
loops += 1;
Expand All @@ -517,6 +517,8 @@
},100);
},
collapseRightSidebar(){
return; //disabled for now

this.tabIndex = null;
this.collapsedRightSidebar = true;
},
Expand Down Expand Up @@ -571,36 +573,56 @@
this.tabIndex = 0;
},

copyLinkToClipboard(): void {
clearPopovers():void{
this.animateEmbedRow = false;
this.showPopover = false;
this.showFullscreenPopover = false;
this.showEmbedPopover = false;
},

copyLinkToClipboard():void {
this.clearPopovers()
copyToClipboard(this.getDetailsLink);
clearInterval(this.intervalId);
this.showPopover = true;
this.intervalId = setInterval(
function () {
this.showPopover = false;
this.showPopover = false;
}.bind(this),
3000
);
},

copyFullscreenLinkToClipboard(): void {
this.clearPopovers()
copyToClipboard(this.getFullscreenLink);
clearInterval(this.intervalId);
this.showFullscreenPopover = true;
this.intervalId = setInterval(
function () {
this.showFullscreenPopover = false;
this.showFullscreenPopover = false;
}.bind(this),
3000
);
},
copySnippetToClipboard(): void {
this.clearPopovers()
copyToClipboard(this.editorCode);
clearInterval(this.intervalId);
this.showEmbedPopover = true;
this.intervalId = setInterval(
function () {
this.showEmbedPopover = false;
this.showEmbedPopover = false;
}.bind(this),
3000
);
},
animateSnippedBox():void{
clearInterval(this.intervalId);
this.animateEmbedRow = true;
this.intervalId = setInterval(
function () {
this.animateEmbedRow = false;
}.bind(this),
3000
);
Expand Down Expand Up @@ -646,6 +668,44 @@
</script>

<style lang="scss">

.details-share-row{
padding: 0.75rem 0.75rem;
background: white;
transform: scale(1);

&:hover{
background-color: #e8ecf1 ;
}

&.active{
background-color: #e8ecf1 ;
animation: pulse-div 0.4s 3;
}


@keyframes pulse-div {
0% {
transform: scale(1);
// background-color: white ;
// box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}

70% {
transform: scale(1.05);
// background-color: #e8ecf1 ;
// box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}

100% {
transform: scale(1);
// background-color: white ;
// box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}

}

.wc-tabs{
.tab-button{
border-bottom:none;
Expand Down

0 comments on commit bfb7c96

Please sign in to comment.