Changeset 3690

Timestamp:

07/03/07 02:50:08 (1 year ago)

Author:

timothy

Message:

Make the iPhone interface work in landscape mode. In landscape mode the input field is hidden, since the keyboard takes up too much room.

Files:

• trunk/Plug-Ins/Web Interface/Resources/iphone/index.html (modified) (1 diff)
• trunk/Plug-Ins/Web Interface/Resources/iphone/iphone.css (modified) (12 diffs)
• trunk/Plug-Ins/Web Interface/Resources/iphone/iphone.js (modified) (6 diffs)

trunk/Plug-Ins/Web Interface/Resources/iphone/index.html

@@ -4 +4 @@
-        <title>Colloquy</title>
-        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-
+maximum-scale=1.0, 
-        <link rel="icon" href="../smallIcon.png" type="image/png" />
-        <link rel="stylesheet" type="text/css" href="iphone.css" encoding="utf-8">

trunk/Plug-Ins/Web Interface/Resources/iphone/iphone.css

@@ -2 +2 @@
-        margin: 0;
-        padding: 0;
-        width: 320px;
-        height: 416px;
-        font-family: Helvetica;
@@ -8 +7 @@
-        cursor: default;
-        -webkit-text-size-adjust: none;
+}
+
+body[orient="landscape"], body[orient="landscape"] .colloquy-members {
+        height: 268px;
+}
+
+body[orient="landscape"] #colloquies, body[orient="landscape"] .colloquy-panel,
+body[orient="landscape"] .colloquy-panel-transcript, body[orient="landscape"] .colloquy-member-list {
+        height: 224px;
+}
+
+body[orient="landscape"] .colloquy-panel-input {
+        display: none;
-}
-
@@ -118 +130 @@
-        position: absolute;
-        width: 100%;
-}
-
-#main-title {
-        top: 0;
-        left: 0;
-
-
-
-
-
-
-
-
-
-
-
-
+
+
-        white-space: nowrap;
-        overflow: hidden;
@@ -140 +139 @@
-}
-
+#colloquy-title {
+        display: none;
+        opacity: 0;
+}
+
-#colloquies {
-        position: relative;
-        left: 0;
-320px
+100%
-        height: 372px;
-        overflow: auto;
@@ -151 +155 @@
-        position: absolute;
-        top: 44px;
-320px
-320px
+100%
+100%
-        height: 372px;
-        background-color: gray;
@@ -160 +164 @@
-.colloquy-panel-transcript {
-        background-color: white;
-        width: 100%;
-        height: 335px;
-        overflow: auto;
@@ -168 +171 @@
-        white-space: nowrap;
-        height: 38px;
-        width: 100%;
-        background-color: rgb(66%, 66%, 66%);
-        background-image: url(images/gradientHighlight.png);
@@ -203 +205 @@
-        top: 416px;
-        left: 0;
-320px
+100%
-        height: 417px;
-        background-color: white;
@@ -211 +213 @@
-
-.colloquy-members-title {
-
-
-
-
-
+
+
-        white-space: nowrap;
-        overflow: hidden;
@@ -222 +221 @@
-
-.colloquy-member-list {
-        width: 100%;
-        height: 372px;
-        overflow: auto;
@@ -362 +360 @@
-.message-wrapper.highlight {
-        background-color: rgb(204, 255, 102);
-http://10.0.1.3:6667/iphone/
+
-        background-repeat: repeat-x;
-}
@@ -432 +430 @@
-
-.colloquy-member-list .member.server.operator:before {
- /resources/admin.png 
+/resources/admin.png
-}
-
-.colloquy-member-list .member.operator:before {
- /resources/op.png 
+/resources/op.png
-}
-
-.colloquy-member-list .member.administrator:before {
- /resources/super-op.png 
+/resources/super-op.png
-}
-
-.colloquy-member-list .member.founder:before {
- /resources/founder.png 
+/resources/founder.png
-}
-
-.colloquy-member-list .member.half.operator:before {
- /resources/half-op.png 
+/resources/half-op.png
-}
-
-.colloquy-member-list .member.voice:before {
- /resources/voice.png 
-
+/resources/voice.png
+

trunk/Plug-Ins/Web Interface/Resources/iphone/iphone.js

@@ -20 +20 @@
-        // pan to the bottom, hides the location bar
-        setTimeout(function() { window.scrollTo(0, 1) }, 100);
+
+        setInterval(Colloquy.updateLayout, 400);
-
-        new Ajax.Request( "/command/setup?overrideStyle=info.colloquy.style.xml&uinque=" + Math.round(Math.random() * 1000000), {
@@ -42 +44 @@
-        window.addEventListener( "beforeunload", function(event) { Colloquy.teardown(event) }, false );
-        window.addEventListener( "unload", function(event) { Colloquy.teardown(event) }, false );
+}
+
+Colloquy.updateLayout = function()
+{
+        if (window.innerWidth !== Colloquy.currentWidth) {
+                Colloquy.currentWidth = window.innerWidth;
+
+                var orient = Colloquy.currentWidth == 320 ? "profile" : "landscape";
+                document.body.setAttribute("orient", orient);
+
+                // pan to the bottom, hides the location bar
+                window.scrollTo(0, 1);
+        }
-}
-
@@ -89 +104 @@
-        Colloquy.animatingMenu = true;
-
+        Colloquy.joinElement.style.display = null;
+        Colloquy.mainTitleElement.style.display = null;
+
-        var animations = [{element: this.backElement, end: {left: 120, opacity: 0}},
-                {element: this.joinElement, end: {opacity: 1}}, {element: this.membersElement, end: {opacity: 0}},
-200
+document.body.offsetWidth / 2
-                {element: this.mainTitleElement, end: {left: 0, top: 0, "font-size": 20, "line-height": 42}},
-
-
-
-
+
-
-        var panel = this;
@@ -358 +373 @@
-        Colloquy.animatingMenu = true;
-
-        var animations = [{element: Colloquy.backElement, end: {left: 6, opacity: 1}},
-                {element: Colloquy.joinElement, end: {opacity: 0}},
-                {element: Colloquy.colloquyTitleElement, end: {left: 0, opacity: 1}},
-                {element: Colloquy.mainTitleElement, end: {left: -110, top: 6, "font-size": 12, "line-height": 28}},
-                {element: Colloquy.colloquiesElement, end: {left: -321}}, {element: this.panelElement, end: {left: 0}}];
-
-        if (this.type == "JVChatRoomPanel")
-                animations.push({element: Colloquy.membersElement, end: {opacity: 1}});
-
-        this.panelElement.style.display = "block";
-        Colloquy.backElement.style.display = "block";
-        Colloquy.colloquyTitleElement.style.display = "block";
-        Colloquy.membersElement.style.display = "block";
+
+        var animations = [{element: Colloquy.backElement, end: {left: 6, opacity: 1}},
+                {element: Colloquy.joinElement, end: {opacity: 0}},
+                {element: Colloquy.colloquyTitleElement, end: {left: 0, opacity: 1}},
+                {element: Colloquy.mainTitleElement, end: {left: (-document.body.offsetWidth / 2) + (Colloquy.backElement.offsetWidth / 2), top: 6, "font-size": 12, "line-height": 28}},
+                {element: Colloquy.colloquiesElement, end: {left: -document.body.offsetWidth - 1}}, {element: this.panelElement, end: {left: 0}}];
+
+        if (this.type == "JVChatRoomPanel")
+                animations.push({element: Colloquy.membersElement, end: {opacity: 1}});
-
-        if (this.wasScrolledNearBottom)
@@ -734 +749 @@
-        this.showingMembers = true;
-
+        this.membersElement.style.display = "block";
+
-        var animations = [{element: this.membersElement, end: {top: 0}}];
-
-        this.membersElement.style.display = "block";
-
-        Colloquy.animateStyle(animations, (event.shiftKey ? 2500 : 250));
@@ -745 +760 @@
-                return;
-
-        var animations = [{element: this.membersElement, end: {top: 416}}];
-
-        this.membersElement.style.display = "block";
+
+        var animations = [{element: this.membersElement, end: {top: document.body.offsetHeight}}];
-
-        var panel = this;