atomaka/NCA-Screens
1
0
Fork 0
Code Releases Activity

Setup basic style for individual image viewing.

Browse source
This commit is contained in:
Andrew Tomaka 2011-11-04 20:20:32 -04:00
parent 74bebb570c
commit ccd7abbf0e
2 changed files with 53 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
css/style.css
View file

@ -19,6 +19,7 @@
html { html {
background-color: #c0c0c0; background-color: #c0c0c0;
background-image: url(../img/concrete_wall_3.png);
min-height: 100%; min-height: 100%;
position: relative; position: relative;
@ -54,12 +55,13 @@ header {
header{ header{
background-color: #303030; background-color: #303030;
position: fixed; background-image: url(../img/dark_circles.png);
/*position: fixed;*/
width: 100%; width: 100%;
height: 40px; height: 25px;
top: 0; top: 0;
left: 0; left: 0;
z-index: 100000; /*z-index: 100000;*/
box-shadow: 0 1px 2px #303030; box-shadow: 0 1px 2px #303030;
-webkit-box-shadow: 0 1px 2px #303030; -webkit-box-shadow: 0 1px 2px #303030;
@ -81,6 +83,7 @@ h1{
#dropbox { #dropbox {
background-color: #a0a0a0; background-color: #a0a0a0;
background-image: url(../img/brushed_alu_dark.png);
border-radius: 3px; border-radius: 3px;
position: relative; position: relative;
@ -182,7 +185,8 @@ h1{
} }
#dropbox .progress { #dropbox .progress {
background-color: #2586d0; background-color: #c0c0c0;
background-image: url(../img/concrete_wall_3.png);
position: absolute; position: absolute;
height: 100%; height: 100%;
left: 0; left: 0;
@ -218,3 +222,32 @@ h1{
#dropbox .linkHolder input { #dropbox .linkHolder input {
width: 100%; width: 100%;
} }
/*-------------------------
Uploaded Image
--------------------------*/
#imageContainer {
width: 100%;
text-align: center;
margin-top: 25px;
margin-bottom: 25px;
}
.image {
max-width: 920px;
}
#message {
background-color: #a0a0a0;
background-image: url(../img/brushed_alu_dark.png);
border-radius: 3px;
margin: auto;
overflow: hidden;
width: 600px;
padding: 10px;
box-shadow: 0 0 4px rgba(0,0,0,0.3) inset,0 -3px 2px rgba(0,0,0,0.1);
}

22
index.php
View file

@ -8,22 +8,24 @@ if($id == '' ) {
$content = 'id not set'; $content = 'id not set';
} else { } else {
if(!is_numeric($id) || $id <= 0) { if(!is_numeric($id) || $id <= 0) {
$content = 'This image does not exist: bad id format (' . $id . ')'; $message = 'This image does not exist: bad id format (' . $id . ')';
} else { } else {
$db = mysqli_init(); $db = mysqli_init();
$db->real_connect($conf->hostname, $conf->username, $conf->password, $conf->database); $db->real_connect($conf->hostname, $conf->username, $conf->password, $conf->database);
$query = "SELECT extension, created FROM screens WHERE id = $id"; $query = "SELECT extension, created, original FROM screens WHERE id = $id";
$result = $db->query($query); $result = $db->query($query);
if($result->num_rows == 0) { if($result->num_rows == 0) {
$content = 'This image does not exist: not in database'; $message = 'This image does not exist: not in database';
} else { } else {
// load tags // load tags
$image = $result->fetch_object(); $image = $result->fetch_object();
$content = '<img src="uploads/' . $id . '.' . $image->extension . '" />'; $imageOutput = '<img src="uploads/' . $id . '.' . $image->extension . '" class="image" />';
$content .= '<br/>Created on: ' . $image->created; $message = 'Uploaded on: ' . $image->created;
$message .= '<br/>Original name: ' . $image->original;
$message .= '<br/>View Raw: <a href="uploads/' . $id . '.' . $image->extension . '">'. $id . '.' . $image->extension . '</a>';
} }
} }
} }
@ -45,9 +47,15 @@ if($id == '' ) {
<header> <header>
<h1>title or navigation or something</h1> <h1>title or navigation or something</h1>
</header> </header>
<?if (isset($imageOutput)) { ?>
<div id="imageContainer">
<?php echo $imageOutput; ?>
</div>
<?php } ?>
<div id="message">
<?php echo $message; ?>
</div>
<div style="margin-top: 200px;">
<?php echo $content; ?>
</div> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>