@visualizevalue/mint-app-base 0.1.99 → 0.1.101
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/components/Embed.vue
CHANGED
|
@@ -98,18 +98,18 @@ watch(width, () => {
|
|
|
98
98
|
<style scoped>
|
|
99
99
|
.embed {
|
|
100
100
|
width: 100%;
|
|
101
|
+
max-height: 100cqmin;
|
|
101
102
|
display: grid;
|
|
102
103
|
align-items: center;
|
|
103
104
|
justify-content: center;
|
|
104
105
|
position: relative;
|
|
105
106
|
touch-action: none;
|
|
106
|
-
overflow: hidden;
|
|
107
107
|
container-type: inline-size;
|
|
108
108
|
|
|
109
109
|
video,
|
|
110
110
|
iframe {
|
|
111
|
-
width: 100%;
|
|
112
111
|
width: 100cqw;
|
|
112
|
+
max-height: 100cqmin;
|
|
113
113
|
aspect-ratio: 1/1 auto;
|
|
114
114
|
}
|
|
115
115
|
|
|
@@ -50,7 +50,6 @@ const imageLoaded = () => {
|
|
|
50
50
|
|
|
51
51
|
<style scoped>
|
|
52
52
|
article.image {
|
|
53
|
-
overflow: hidden;
|
|
54
53
|
background-color: var(--background);
|
|
55
54
|
overflow: hidden;
|
|
56
55
|
position: relative;
|
|
@@ -58,6 +57,9 @@ article.image {
|
|
|
58
57
|
justify-content: center;
|
|
59
58
|
align-items: center;
|
|
60
59
|
container-type: inline-size;
|
|
60
|
+
width: 100%;
|
|
61
|
+
height: 100%;
|
|
62
|
+
max-height: 100cqh;
|
|
61
63
|
|
|
62
64
|
.loader {
|
|
63
65
|
position: absolute;
|
|
@@ -68,8 +70,10 @@ article.image {
|
|
|
68
70
|
}
|
|
69
71
|
|
|
70
72
|
img {
|
|
73
|
+
width: auto;
|
|
74
|
+
height: auto;
|
|
75
|
+
max-height: 100cqmin;
|
|
71
76
|
aspect-ratio: 1/1 auto;
|
|
72
|
-
object-fit: contain;
|
|
73
77
|
transform: scale(1.2);
|
|
74
78
|
opacity: 0;
|
|
75
79
|
transition: all var(--speed);
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<article class="token-detail">
|
|
3
3
|
<div class="artifact">
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
<ImageVoid v-else />
|
|
8
|
-
</div>
|
|
4
|
+
<Embed v-if="token.animationUrl" :src="token.animationUrl" :muted="false" controls />
|
|
5
|
+
<Image v-else-if="token.image" :src="token.image" :alt="token.name" />
|
|
6
|
+
<ImageVoid v-else />
|
|
9
7
|
|
|
10
8
|
<Actions>
|
|
11
9
|
<Button :to="{ name: 'id-collection-tokenId-full' }" title="Open">
|
|
@@ -110,52 +108,40 @@ const ownedBalance = computed(() => collection.value && store.tokenBalance(colle
|
|
|
110
108
|
--padding-x: 0;
|
|
111
109
|
--padding-top: 0;
|
|
112
110
|
--padding-bottom: 0;
|
|
113
|
-
--width: 100cqw;
|
|
114
|
-
--height: 100%;
|
|
115
|
-
--dimension: min(100cqw, 100cqh);
|
|
111
|
+
--artifact-width: 100cqw;
|
|
112
|
+
--artifact-height: 100%;
|
|
116
113
|
|
|
117
114
|
@media (--md) {
|
|
118
|
-
--width: 50cqw;
|
|
119
|
-
--height: calc(100cqh - var(--navbar-height));
|
|
115
|
+
--artifact-width: 50cqw;
|
|
120
116
|
--padding-top: var(--spacer-lg);
|
|
121
117
|
--padding-x: var(--spacer-lg);
|
|
122
118
|
--padding-bottom: calc(var(--spacer-lg) + var(--spacer));
|
|
123
|
-
--padding-bottom: var(--spacer-lg);
|
|
124
|
-
|
|
125
|
-
--dimension: min(
|
|
126
|
-
calc(var(--width) - var(--padding-x)*2),
|
|
127
|
-
calc(100cqh - var(--padding-top) - var(--padding-bottom))
|
|
128
|
-
);
|
|
129
119
|
}
|
|
130
120
|
|
|
131
121
|
@media (--lg) {
|
|
132
|
-
--width: 60cqw;
|
|
122
|
+
--artifact-width: 60cqw;
|
|
133
123
|
--padding-top: var(--spacer-xl);
|
|
134
124
|
--padding-x: var(--spacer-xl);
|
|
135
125
|
--padding-bottom: calc(var(--spacer-xl) + var(--spacer));
|
|
136
126
|
}
|
|
137
127
|
|
|
138
|
-
|
|
139
|
-
|
|
128
|
+
width: var(--artifact-width);
|
|
129
|
+
height: var(--artifact-height);
|
|
140
130
|
padding: var(--padding-top) var(--padding-x) var(--padding-bottom);
|
|
141
131
|
position: relative;
|
|
132
|
+
container-type: inline-size;
|
|
133
|
+
display: flex;
|
|
134
|
+
justify-content: center;
|
|
135
|
+
align-items: center;
|
|
136
|
+
border-bottom: var(--border);
|
|
142
137
|
|
|
143
138
|
@media (--md) {
|
|
139
|
+
border-bottom: none;
|
|
144
140
|
border-right: var(--border);
|
|
145
141
|
display: flex;
|
|
146
142
|
justify-content: center;
|
|
147
143
|
align-items: center;
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
> *:not(menu) {
|
|
151
|
-
width: var(--dimension);
|
|
152
|
-
height: auto;
|
|
153
|
-
border-bottom: var(--border) !important;
|
|
154
|
-
transition: transform var(--speed-slow), box-shadow var(--speed-slow);
|
|
155
|
-
|
|
156
|
-
@media (--md) {
|
|
157
|
-
border-bottom: none !important;
|
|
158
|
-
}
|
|
144
|
+
container-type: size;
|
|
159
145
|
}
|
|
160
146
|
|
|
161
147
|
> menu {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<article class="token-full">
|
|
3
3
|
<div class="frame">
|
|
4
|
-
<Embed v-if="token.animationUrl" :src="token.animationUrl" />
|
|
4
|
+
<Embed v-if="token.animationUrl" :src="token.animationUrl" :muted="false" controls />
|
|
5
5
|
<Image v-else="token.image" :src="token.image" />
|
|
6
6
|
</div>
|
|
7
7
|
|
|
@@ -41,6 +41,23 @@ article {
|
|
|
41
41
|
|
|
42
42
|
> .frame {
|
|
43
43
|
width: calc(min(100vw, 100dvh) - var(--spacer)*2);
|
|
44
|
+
height: calc(100dvh - var(--spacer)*2);
|
|
45
|
+
display: flex;
|
|
46
|
+
justify-content: center;
|
|
47
|
+
align-items: center;
|
|
48
|
+
container-type: size;
|
|
49
|
+
|
|
50
|
+
:deep(> *) {
|
|
51
|
+
max-height: 100cqh;
|
|
52
|
+
max-width: 100cqw;
|
|
53
|
+
|
|
54
|
+
> img,
|
|
55
|
+
> video,
|
|
56
|
+
> iframe {
|
|
57
|
+
max-height: 100cqh;
|
|
58
|
+
max-width: 100cqw;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
44
61
|
}
|
|
45
62
|
|
|
46
63
|
> .button {
|