Comments (6)
Yes.
I know from previous projects that it's close to impossible to do all the breakpoints only with css, or at least it's quite limiting in terms of design and performance, e.g. for mobile we'll need a bottom navigation as opposed to the side menu on desktop.
We could also render both elements and then hide one with CSS media queries based on the breakpoints but that would mean rendering one component without using it, which is bad for performance.
I think the approach should be the following:
- If possible build layouts and components responsive with UnoCSS breakpoints, so that they work for all viewport sizes. This is the ideal solution.
- Only if that is not possible use a mobile and a desktop component and
ui.mobile
to show only one.
At some point we might also need a tablet size, not sure yet...
from merklin.
Yeah that's a good point, I'm going to take at look at the three apps you've referenced on the README.md
and try and play around with some ideas.
from merklin.
Basic mobile should work now.
Also, you can now install the app as PWA and connect from a normal browser via WalletConnect + e.g. MetaMask.
from merklin.
I noticed the stores/ui.ts
and I'm intrigued. I've only ever adjusted views subject to breakpoints set with Tailwind. Do you set breakpoints using Pinia too, or in Uno (another thing I've not come across until this project haha) or some other way altogether?
from merklin.
Okay that's interesting. Going to look in to UnoCSS.
Forgive me for asking something potentially obvious, specific layouts to be created as Nuxt references in the docs (https://nuxtjs.org/docs/directory-structure/layouts/)?
from merklin.
Do you mean using a layout for mobile? I guess that would also be an option but we would probably still need the ui.mobile
flag, bc sometimes you might have different display modes within a component or something like that, e.g. the transaction list will have to very compact and probably simplified when displayed on a small screen.
But tbh I'm not sure what's the best solution to deal with this.
from merklin.
Related Issues (20)
- Chart colors not reactive HOT 1
- Deactivate chart tooltips on mobile HOT 1
- Activity timeframe selection
- Address repetition rate HOT 1
- Performance chart
- Gas chart unit toggle HOT 1
- Fix safe-area-inset-bottom for iOS PWA
- Hide scroll bars on iOS HOT 5
- Link block explorers to transactions
- Sample wallets
- Make nuxi --https work HOT 1
- Remove action bar
- Dropdown selectors for chart options
- Transaction history incomplete
- Alternative fiat currencies
- Query param to select address HOT 1
- Problems displaying on Paquet HOT 7
- Remove reactivity transform
- Upgrade to Ethers v6 HOT 2
- Testing Dosu bot
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from merklin.