jlengrand/soundcloud-web-component-application
1
0
Fork 0
mirror of https://github.com/jlengrand/soundcloud-web-component-application.git synced 2026-03-10 08:41:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add styling to title

Browse Source
This commit is contained in:
Julien Lengrand-Lambert
2017-06-08 10:51:11 +02:00
parent 8ca66d6bff
commit 85e7012ee2
4 changed files with 55 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/components/sc-player/sc-player.html
View File

@@ -8,16 +8,23 @@
width: 50%;
display: block;
}
#sc-iframe{
width: 100%;
height: 400px;
}
#sc-player{
width: 100%;
}
</style>
<iframe
width="100%"
height="800"
scrolling="no"
<div id="sc-player">
<iframe id="sc-iframe"
frameborder="no"
src="https://w.soundcloud.com/player/?url={{encodedPlaylistUrl}}&amp;auto_play={{autoPlay}}&amp;hide_related={{hideRelated}}&amp;show_comments={{showComments}}&amp;show_user={{showUser}}&amp;show_reposts={{showReposts}}&amp;visual={{visual}}">
</iframe>
</div>
</template>
<script>
Polymer({

38
app/components/sc-title/sc-title.html
View File

@@ -5,10 +5,46 @@
<style>
:host {
display: block;
width: 100%;
padding-top: 30px;
padding-bottom: 30px;
}
#sc-title{
width: 60%;
box-sizing: border-box;
margin: auto;
}
h1{
border: 3px solid #333;
font-size: 300%;
font-weight: 100;
display: block;
text-align: center;
font-family: Roboto,Helvetica,Arial,sans-serif;
padding: 1em;
text-transform: uppercase;
color: #333;
}
h2{
letter-spacing: 0.05em;
opacity: 0.8;
display: block;
text-align: center;
text-transform: uppercase;
font-family: Roboto,Helvetica,Arial,sans-serif;
color: #333;
}
</style>
<h1>Soundcloud Playlist, featuring Polymer</h1>
<div id="sc-title">
<h1>Get Rocking!</h1>
<h2>A simple embedded soundcloud playlist, done in Polymer</h2>
</div>
</template>
<script>

3
app/index.css Normal file
View File

@@ -0,0 +1,3 @@
body{
background-color: #ccc;
}

5
app/index.html
View File

@@ -6,14 +6,15 @@
</head>
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="stylesheet" href="index.css">
<link rel="import" href="components/sc-title/sc-title.html">
<link rel="import" href="components/sc-profile/sc-profile.html">
<link rel="import" href="components/sc-player/sc-player.html">
<body>
<h1>PLOP</h1>
<sc-title></sc-title>
<sc-profile></sc-profile>
<sc-player playlist-url="https://soundcloud.com/stuart-silva-322219159/sets/romantic-songs-mariela"></sc-player>
<sc-profile></sc-profile>
</body>
</html>