Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Responsive CSS for Hubs Landing Page #735

Merged
merged 6 commits into from
Nov 15, 2018
Merged

Responsive CSS for Hubs Landing Page #735

merged 6 commits into from
Nov 15, 2018

Conversation

robertlong
Copy link
Contributor

@robertlong robertlong commented Nov 14, 2018 •
edited
Loading

This PR transitions the Hubs landing page from trying to scale to the full screen to a traditional scrolling web page. It shows the subheading, attribution, main nav, and footer on smaller screens by moving them all below the fold and making them flow vertically. I've also made the attribution for the environment in the video more legible and added shadows to the environment picker arrows.

Fixes #686

@robertlong robertlong changed the title Responsive CSS for Hubs and Spoke landing pages (WIP) Responsive CSS for Hubs Landing Page Nov 14, 2018
@gfodor
Copy link
Contributor

gfodor commented Nov 14, 2018

Thanks for fixing this up -- I'm not sure about two of the changes. I really don't want to move the primary CTA below the fold on smaller laptop screens. Also, I haven't tested it but I'd imagine this increases the amount of scrolling needed in Oculus Browser + FxR. I think setting the breakpoint more aggressively to hide the header would resolve that issue. Also, the footer styling seems off now -- the mozilla logo I think needs more padding/margin as it was before and I think I prefer Rian's design with no footer bar.

@robertlong
Copy link
Contributor Author

Test it out now. I think I've addressed all of those issues.

@buildsize
Copy link

buildsize bot commented Nov 14, 2018

File name Previous Size New Size Change
avatar-selector.html 616 bytes 616 bytes 0 bytes (0%)
favicon.ico 33.69 KB 33.69 KB 0 bytes (0%)
hub-preview.png 16.5 KB 16.5 KB 0 bytes (0%)
hub.html 40.96 KB 40.96 KB 0 bytes (0%)
index.html 695 bytes 695 bytes 0 bytes (0%)
link.html 803 bytes 803 bytes 0 bytes (0%)
LoadingObject_Atom-[hash].glb 27.43 KB 27.43 KB 0 bytes (0%)
bubble_off-[hash].png 4.22 KB 4.22 KB 0 bytes (0%)
bubble_off-hover-[hash].png 5.85 KB 5.85 KB 0 bytes (0%)
bubble_on-[hash].png 5.65 KB 5.65 KB 0 bytes (0%)
bubble_on-hover-[hash].png 5.46 KB 5.46 KB 0 bytes (0%)
create_object-[hash].png 8.38 KB 8.38 KB 0 bytes (0%)
create_object-hover-[hash].png 10.65 KB 10.65 KB 0 bytes (0%)
freeze_off-[hash].png 7.53 KB 7.53 KB 0 bytes (0%)
freeze_off-hover-[hash].png 9.96 KB 9.96 KB 0 bytes (0%)
freeze_on-[hash].png 7.36 KB 7.36 KB 0 bytes (0%)
freeze_on-hover-[hash].png 9.45 KB 9.45 KB 0 bytes (0%)
mute_off-[hash].png 2.76 KB 2.76 KB 0 bytes (0%)
mute_off-hover-[hash].png 3.65 KB 3.65 KB 0 bytes (0%)
mute_on-[hash].png 5.48 KB 5.48 KB 0 bytes (0%)
mute_on-hover-[hash].png 5.29 KB 5.29 KB 0 bytes (0%)
spawn_photo-[hash].png 3.14 KB 3.14 KB 0 bytes (0%)
tooltip.9-[hash].png 640 bytes 640 bytes 0 bytes (0%)
account-[hash].svg 826 bytes 826 bytes 0 bytes (0%)
daydream_entry-[hash].svg 6.45 KB 6.45 KB 0 bytes (0%)
default_thumbnail-[hash].png 3.02 KB 3.02 KB 0 bytes (0%)
desktop_screen_entry-[hash].svg 376 bytes 376 bytes 0 bytes (0%)
device_entry-[hash].svg 10.47 KB 10.47 KB 0 bytes (0%)
dropdown_arrow-[hash].png 172 bytes 172 bytes 0 bytes (0%)
dropdown_arrow@2x-[hash].png 233 bytes 233 bytes 0 bytes (0%)
gearvr_entry-[hash].svg 574 bytes 574 bytes 0 bytes (0%)
generic_vr_entry-[hash].svg 950 bytes 950 bytes 0 bytes (0%)
giphy_logo-[hash].png 1.02 KB 1.02 KB 0 bytes (0%)
level_background-[hash].png 4.03 KB 4.03 KB 0 bytes (0%)
level_background@2x-[hash].png 4.63 KB 4.63 KB 0 bytes (0%)
level_fill-[hash].png 1.03 KB 1.03 KB 0 bytes (0%)
level_fill@2x-[hash].png 2.02 KB 2.02 KB 0 bytes (0%)
logo-[hash].svg 14.21 KB 14.21 KB 0 bytes (0%)
mic_denied-[hash].png 2.02 KB 2.02 KB 0 bytes (0%)
mic_denied@2x-[hash].png 3.97 KB 3.97 KB 0 bytes (0%)
mic_granted-[hash].png 2.21 KB 2.21 KB 0 bytes (0%)
mic_granted@2x-[hash].png 4.26 KB 4.26 KB 0 bytes (0%)
mic_level-[hash].png 697 bytes 697 bytes 0 bytes (0%)
mic_level@2x-[hash].png 1.48 KB 1.48 KB 0 bytes (0%)
mic_small-[hash].png 234 bytes 234 bytes 0 bytes (0%)
mic_small@2x-[hash].png 370 bytes 370 bytes 0 bytes (0%)
mobile_screen_entry-[hash].svg 914 bytes 914 bytes 0 bytes (0%)
speaker_level-[hash].png 626 bytes 626 bytes 0 bytes (0%)
speaker_level@2x-[hash].png 1.29 KB 1.29 KB 0 bytes (0%)
warning_icon-[hash].png 442 bytes 442 bytes 0 bytes (0%)
warning_icon@2x-[hash].png 699 bytes 699 bytes 0 bytes (0%)
aframe-inspector.min-[hash].js 384.44 KB 384.44 KB 0 bytes (0%)
avatar-selector-[hash].js 40.1 KB 40.1 KB 0 bytes (0%)
avatar-selector-[hash].js.map 83.99 KB 83.99 KB 0 bytes (0%)
engine-[hash].js 1.41 MB 1.41 MB 0 bytes (0%)
engine-[hash].js.map 4.45 MB 4.45 MB 0 bytes (0%)
gifparsing.worker-[hash].js 1.91 KB 1.91 KB 0 bytes (0%)
gifparsing.worker-[hash].js.map 8.32 KB 8.32 KB 0 bytes (0%)
hub-[hash].js 422.49 KB 422.49 KB 0 bytes (0%)
hub-[hash].js.map 1015.69 KB 1015.69 KB 0 bytes (0%)
index-[hash].js 52.73 KB 52.87 KB 140 bytes (0%)
index-[hash].js.map 88.69 KB 88.95 KB 269 bytes (0%)
link-[hash].js 30.5 KB 30.5 KB 0 bytes (0%)
link-[hash].js.map 63.76 KB 63.76 KB 0 bytes (0%)
sketchfab-zip.worker-[hash].js 155.49 KB 155.49 KB 0 bytes (0%)
sketchfab-zip.worker-[hash].js.map 774.45 KB 774.45 KB 0 bytes (0%)
vendor-[hash].js 611.13 KB 611.13 KB 0 bytes (0%)
vendor-[hash].js.map 2.02 MB 2.02 MB 0 bytes (0%)
quack-[hash].mp3 7.03 KB 7.03 KB 0 bytes (0%)
specialquack-[hash].mp3 11.57 KB 11.57 KB 0 bytes (0%)
tone-[hash].mp3 53.92 KB 53.92 KB 0 bytes (0%)
tone-[hash].wav 385.29 KB 385.29 KB 0 bytes (0%)
tone-[hash].webm 32.04 KB 32.04 KB 0 bytes (0%)
tone-[hash].ogg 32.55 KB 32.55 KB 0 bytes (0%)
avatar-selector-[hash].css 1.15 KB 1.15 KB 0 bytes (0%)
avatar-selector-[hash].css.map 136 bytes 136 bytes 0 bytes (0%)
hub-[hash].css 80.35 KB 80.35 KB 0 bytes (0%)
hub-[hash].css.map 124 bytes 124 bytes 0 bytes (0%)
index-[hash].css 34.5 KB 38.32 KB 3.82 KB (11%)
index-[hash].css.map 126 bytes 126 bytes 0 bytes (0%)
link-[hash].css 6.1 KB 6.1 KB 0 bytes (0%)
link-[hash].css.map 125 bytes 125 bytes 0 bytes (0%)
home-[hash].mp4 2 MB 2 MB 0 bytes (0%)
home-[hash].webm 1.81 MB 1.81 MB 0 bytes (0%)
negx-[hash].jpg 54.45 KB 54.45 KB 0 bytes (0%)
negy-[hash].jpg 50.97 KB 50.97 KB 0 bytes (0%)
negz-[hash].jpg 53.29 KB 53.29 KB 0 bytes (0%)
posx-[hash].jpg 58.64 KB 58.64 KB 0 bytes (0%)
posy-[hash].jpg 19.17 KB 19.17 KB 0 bytes (0%)
posz-[hash].jpg 57.49 KB 57.49 KB 0 bytes (0%)
spawn_pen-[hash].png 2.39 KB 2.39 KB 0 bytes (0%)
spawn_pen-hover-[hash].png 3.07 KB 3.07 KB 0 bytes (0%)
spawn_camera-[hash].png 2.93 KB 2.93 KB 0 bytes (0%)
spawn_camera-hover-[hash].png 4.06 KB 4.06 KB 0 bytes (0%)
scene.html 1.55 KB 1.55 KB 0 bytes (0%)
scene-[hash].js 112.92 KB 112.92 KB 0 bytes (0%)
scene-[hash].js.map 249.34 KB 249.34 KB 0 bytes (0%)
scene-[hash].css 11.01 KB 11.01 KB 0 bytes (0%)
scene-[hash].css.map 126 bytes 126 bytes 0 bytes (0%)
camera_tool-[hash].glb 757.23 KB 757.23 KB 0 bytes (0%)
hub-preview-white-[hash].png 62.76 KB 62.76 KB 0 bytes (0%)
link_dialog_header-[hash].svg 950 bytes 950 bytes 0 bytes (0%)
moz-logo-black-[hash].png 1.71 KB 1.71 KB 0 bytes (0%)
hub-preview-light-no-shadow-[hash].png 9.35 KB 9.35 KB 0 bytes (0%)
spoke.html 1.42 KB 1.42 KB 0 bytes (0%)
spoke-[hash].js 17.71 KB 17.71 KB 0 bytes (0%)
spoke-[hash].js.map 28.21 KB 28.21 KB 0 bytes (0%)
spoke-[hash].css 6.32 KB 6.32 KB 0 bytes (0%)
spoke-[hash].css.map 126 bytes 126 bytes 0 bytes (0%)
spoke_logo-[hash].png 148.82 KB 148.82 KB 0 bytes (0%)
spoke_logo_black-[hash].png 45.87 KB 45.87 KB 0 bytes (0%)
twitter-[hash].svg 869 bytes 869 bytes 0 bytes (0%)
tap_mellow-[hash].wav 624 bytes 624 bytes 0 bytes (0%)
presence_desktop-[hash].png 252 bytes 252 bytes 0 bytes (0%)
presence_phone-[hash].png 237 bytes 237 bytes 0 bytes (0%)
presence_vr-[hash].png 558 bytes 558 bytes 0 bytes (0%)
hub.service.js 1.34 KB 1.34 KB 0 bytes (0%)
spoke-[hash].webm 5.52 MB 5.52 MB 0 bytes (0%)
spoke-[hash].mp4 6.27 MB 6.27 MB 0 bytes (0%)
action_button.9-[hash].png 2.08 KB 2.08 KB 0 bytes (0%)
spawn_message-[hash].png 625 bytes 625 bytes 0 bytes (0%)
A_bendUp-[hash].wav 60.04 KB 60.04 KB 0 bytes (0%)
Eb_blip-[hash].wav 5.88 KB 5.88 KB 0 bytes (0%)
PenDraw1-[hash].wav 16.04 KB 16.04 KB 0 bytes (0%)
PenSpawn-[hash].wav 12.04 KB 12.04 KB 0 bytes (0%)
PicSnapHey-[hash].wav 120.04 KB 120.04 KB 0 bytes (0%)
quickTurn-[hash].wav 16.04 KB 16.04 KB 0 bytes (0%)
share_message-[hash].png 18.9 KB 18.9 KB 0 bytes (0%)
presence-count-[hash].png 1.78 KB 1.78 KB 0 bytes (0%)
pop-[hash].wav 192.54 KB 192.54 KB 0 bytes (0%)
tack-[hash].wav 40.84 KB 40.84 KB 0 bytes (0%)
suspense-[hash].wav 508.04 KB 508.04 KB 0 bytes (0%)
teleportArc-[hash].wav 184.04 KB 184.04 KB 0 bytes (0%)
welcome-[hash].wav 830.82 KB 830.82 KB 0 bytes (0%)
tick-[hash].wav 8.04 KB 8.04 KB 0 bytes (0%)

@robertlong robertlong merged commit 735854c into master Nov 15, 2018
@brianpeiris brianpeiris deleted the fix/responsive-css branch December 13, 2018 21:53
@snyk-bot snyk-bot mentioned this pull request Aug 19, 2022
Open
@MarcelRaschke MarcelRaschke mentioned this pull request Aug 19, 2022
Open
This was referenced Aug 19, 2022
Open
Open
@MarcelRaschke MarcelRaschke mentioned this pull request Aug 20, 2022
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@robertlong @gfodor