Comments (4)
dmolsen
commented on May 31, 2024
Some questions...
- How does this work with Templates and Pages? They get the same header and footer as Atoms, Molecules and Organisms.
- How do annotations work in the context of Templates and Pages? They can't just be stacked below all the elements. That's why I implemented the "mobile first demo" style of pop-up.
- Does this add padding to a pattern thus negating some of the benefits of the iFrame resizing for testing or determining breakpoints? Or is that even a concern for Atoms, Molecules and Organisms?
Some clarification on what you mean by "so that we can use the same code" would be helpful. Not sure what the goal is. Need to make sure I'm not going too far afield with my implementation. I was sort of hoping on the pattern view we could use the "mobile first demo" style of pop-up for the code view too but if that's out I'll have to rethink some things.
from patternlab-php.
bradfrost
commented on May 31, 2024
Good questions.
- Is it possible to make a distinction between page-level (templates and pages) and non-page-level (organisms, molecules, and atoms) elements? I think including the header and pattern wrapper HTML makes sense for these non-page-level elements, but yeah it doesn't make sense for those to appear on page level stuff.
- Annotations will be handled the way it is in the mobile-first demo. The user will click on an annotated element and the annotation will pop up. A phase 2, nice-to-have version of annotations would allow users to view all annotations for all the elements on the page. That will require a bit more thought, but just keep it in mind.
- Good call. At first glance, including the padding for non-page-level elements seemed like a nice way to avoid things butting up against the viewport, but yeah that causes problems. That is a legit concern, especially for things like headers and footers, which I've always coded in isolation. The padding would throw things off. Maybe I can remove the padding across the board, and only apply it to the pattern wrapper on the list view.
Some clarification on what you mean by "so that we can use the same code" would be helpful.
Basically, code view and annotation view don't work because they're looking for the contents of sg-pattern-body. By including the wrapper markup, code view and annotation view code works.
I was sort of hoping on the pattern view we could use the "mobile first demo" style of pop-up for the code view too but if that's out I'll have to rethink some things.
We can totally do that instead.
from patternlab-php.
dmolsen
commented on May 31, 2024
k...
- It might be possible. Templates and Pages are rendered out of a different "level" (i.e. they don't have sub-types) so I might be able to use that as a hook. I've been wondering for a while if Templates should be allowed custom headers/footers so maybe this is a chance to try to implement that.
- Definitely doable. But, yeah, more thought needed. The core is there... just need to figure out UI.
On the code view/annotation stuff... I'm going to have to rewrite the code view stuff. The jQuery-based hop in styleguide.js from the "viewer" to the frame contents and then using sg-pattern-body is nice/fast but it will puke if someone tries to use Apache-less mode. Security policies can be a bitch. It's why I've done all of the communication between "viewer" and frame contents with postMessage. Hence, annotations-viewer.js and annotations-pattern.js. I know the annotation stuff I have going now doesn't require sg-pattern-body. It's checking for .pattern-list on <body> in the style guide and view all templates.
from patternlab-php.
bradfrost
commented on May 31, 2024
On the code view/annotation stuff... I'm going to have to rewrite the code view stuff. The jQuery-based hop in styleguide.js from the "viewer" to the frame contents and then using sg-pattern-body is nice/fast but it will puke if someone tries to use Apache-less mode. Security policies can be a bitch. It's why I've done all of the communication between "viewer" and frame contents with postMessage. Hence, annotations-viewer.js and annotations-pattern.js. I know the annotation stuff I have going now doesn't require sg-pattern-body. It's checking for .pattern-list on in the style guide and view all templates.
Do what you gotta do.
from patternlab-php.
Related Issues (20)
- Gruntfile Configuration - Needs Updated? HOT 1
- Documentation for Upgrading from 1 -> 2 HOT 1
- Adding tabs to the UI (a la plugin-node-tab) HOT 2
- "The partial could not be found" when using styleModifier HOT 1
- PatternStates not working as expected HOT 5
- Best Practice - Laravel HOT 5
- Possible to add a space in a custom Pattern State name? HOT 1
- Using pattern-specific data when using 'View All'
- Documentation request: Viewing Patterns (connection refused error when viewing on other computers on the same network) HOT 1
- Serving patternlab doesn't seem to work correctly from a gulp shell task
- Adding multiple classes via styleModifier not working HOT 1
- Class '\PatternLab\TwigNamespaces\PatternLabListener' not found HOT 1
- Add favicon and touch icons to Pattern Lab?
- Is there a convention to integrating Vue components into Patternlab?
- Patterlab-php with Mustache starter-kit not Installing correctly
- Patternlab php not working with PHP 8.0 HOT 3
- Pulse rates
- Pattern Fluctuation
- Patternlab and PHP 8.1? HOT 1
- pattern-lab/core and its doctrine/collections dependency is not compatible with PHP 8.1 HOT 3
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 patternlab-php.