Page MenuHomePhabricator

D635.id.diff
No OneTemporary

D635.id.diff

diff --git a/src/overlay.js b/src/overlay.js
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -87,6 +87,18 @@
block: function () {
if (!this.isTop()) { return; }
blocked = true;
+ },
+
+ /**
+ * This method allows your application to define the kind of overlay being used,
+ * fixed overlays are set to follow the viewport (if the user scrolls the overlay
+ * will follow) or not (in which case the overlay will be attached to the document)
+ *
+ * @param {bool} set
+ */
+ setFixed : function (set) {
+ if (set) { this.container.classList.add('fixed'); }
+ else { this.container.classList.remove('fixed'); }
}
};
diff --git a/src/styles/overlay.scss b/src/styles/overlay.scss
--- a/src/styles/overlay.scss
+++ b/src/styles/overlay.scss
@@ -1,8 +1,19 @@
.overlay {
- position: fixed;
+ /*
+ * Compared to a fixed position, an absolute position provides us with much increased
+ * flexibility when working with layers. This allows us to create layers that are
+ * inherently larger than the viewport (which is a valuable feature) and it allows to
+ * position overlays relative to the document instead of the viewport.
+ */
+ position: absolute;
top: 0;
left: 0;
+}
+
+.overlay.fixed
+{
+ position: fixed;
height: 100%;
width: 100%;
}
\ No newline at end of file

File Metadata

Mime Type
text/plain
Expires
Wed, Apr 14, 12:26 PM (3 w, 6 d ago)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
6004
Default Alt Text
D635.id.diff (1 KB)

Event Timeline