@visualizevalue/mint-app-base 0.1.99 → 0.1.100
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,8 @@ article.image {
|
|
|
58
57
|
justify-content: center;
|
|
59
58
|
align-items: center;
|
|
60
59
|
container-type: inline-size;
|
|
60
|
+
width: 100%;
|
|
61
|
+
max-height: 100cqmin;
|
|
61
62
|
|
|
62
63
|
.loader {
|
|
63
64
|
position: absolute;
|
|
@@ -68,8 +69,8 @@ article.image {
|
|
|
68
69
|
}
|
|
69
70
|
|
|
70
71
|
img {
|
|
72
|
+
max-height: 100cqmin;
|
|
71
73
|
aspect-ratio: 1/1 auto;
|
|
72
|
-
object-fit: contain;
|
|
73
74
|
transform: scale(1.2);
|
|
74
75
|
opacity: 0;
|
|
75
76
|
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,54 +108,42 @@ 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%;
|
|
111
|
+
--artifact-width: 100cqw;
|
|
112
|
+
--artifact-height: 100%;
|
|
115
113
|
--dimension: min(100cqw, 100cqh);
|
|
116
114
|
|
|
117
115
|
@media (--md) {
|
|
118
|
-
--width: 50cqw;
|
|
119
|
-
--height: calc(100cqh - var(--navbar-height));
|
|
116
|
+
--artifact-width: 50cqw;
|
|
120
117
|
--padding-top: var(--spacer-lg);
|
|
121
118
|
--padding-x: var(--spacer-lg);
|
|
122
119
|
--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
120
|
}
|
|
130
121
|
|
|
131
122
|
@media (--lg) {
|
|
132
|
-
--width: 60cqw;
|
|
123
|
+
--artifact-width: 60cqw;
|
|
133
124
|
--padding-top: var(--spacer-xl);
|
|
134
125
|
--padding-x: var(--spacer-xl);
|
|
135
126
|
--padding-bottom: calc(var(--spacer-xl) + var(--spacer));
|
|
136
127
|
}
|
|
137
128
|
|
|
138
|
-
|
|
139
|
-
|
|
129
|
+
width: var(--artifact-width);
|
|
130
|
+
height: var(--artifact-height);
|
|
140
131
|
padding: var(--padding-top) var(--padding-x) var(--padding-bottom);
|
|
141
132
|
position: relative;
|
|
133
|
+
container-type: inline-size;
|
|
134
|
+
display: flex;
|
|
135
|
+
justify-content: center;
|
|
136
|
+
align-items: center;
|
|
137
|
+
border-bottom: var(--border);
|
|
142
138
|
|
|
143
139
|
@media (--md) {
|
|
140
|
+
border-bottom: none;
|
|
144
141
|
border-right: var(--border);
|
|
145
142
|
display: flex;
|
|
146
143
|
justify-content: center;
|
|
147
144
|
align-items: center;
|
|
148
145
|
}
|
|
149
146
|
|
|
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
|
-
}
|
|
159
|
-
}
|
|
160
|
-
|
|
161
147
|
> menu {
|
|
162
148
|
position: absolute;
|
|
163
149
|
bottom: var(--spacer);
|
|
@@ -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,22 @@ 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
|
+
|
|
49
|
+
:deep(> *) {
|
|
50
|
+
max-height: 100cqh;
|
|
51
|
+
max-width: 100cqw;
|
|
52
|
+
|
|
53
|
+
> img,
|
|
54
|
+
> video,
|
|
55
|
+
> iframe {
|
|
56
|
+
max-height: 100cqh;
|
|
57
|
+
max-width: 100cqw;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
44
60
|
}
|
|
45
61
|
|
|
46
62
|
> .button {
|